/* MyVoyageBoard split stylesheet: styles-dashboard-cruise.css
   Dashboard, Cruise Log, Command Center, memories and related feature polish
   Preserves original cascade order from styles.css. */

/* ===============================
   Mobile header cleanup + User tab move
   =============================== */
@media (max-width: 768px) {
  .status-dot,
  .online-indicator,
  .header-status-dot,
  .header-spacer,
  .status-bar,
  .header-divider {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #change-user-btn,
  .header-user,
  .user-btn,
  .top-user-button {
    display: none !important;
  }

  header,
  .app-header {
    padding-bottom: 8px !important;
  }
}

/* ===============================
   Mobile header cleanup v3
   =============================== */
@media (max-width: 768px){

  /* Hide light/dark toggle on mobile */
  .theme-toggle,
  .theme-btn,
  .light-toggle,
  .dark-toggle {
    display:none !important;
  }

  /* Kill green dot + spacer bar */
  .status-dot,
  .online-indicator,
  .header-status-dot,
  .header-spacer,
  .status-bar {
    display:none !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  header,
  .app-header {
    padding-bottom:6px !important;
  }
}

/* Desktop ports-of-call spacing fix */
@media (min-width: 768px) {
  .port-pill {
    padding: 12px 16px;
    gap: 12px;
  }

  .port-pill .port-actions {
    display: flex;
    align-items: center;
    gap: 10px; /* space between buttons */
    margin-left: auto;
  }

  .port-pill button,
  .port-pill .icon-btn {
    margin-left: 6px;
  }

  .port-pill label {
    margin-right: 10px;
  }
}

/* ===============================
   Mobile header + tabbar fixes v4
   =============================== */
@media (max-width: 768px){
  /* Hide signed-in autosave chip + dot */
  .chip, .chip-dot, #privacy-chip, #privacy-chip-text {
    display:none !important;
  }

  /* Hide theme toggle pill in header on mobile */
  #theme-toggle { display:none !important; }

  /* Tighten header spacing after removing chips */
  .header-actions { gap: 0 !important; }
}


/* Flight status preview (FlightAware AeroAPI) */
.flight-status-pill{
  margin-top:6px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:650;
  border:1px solid var(--surface-border);
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.flight-status-pill[data-status-key="delayed"],
.flight-status-pill[data-status-key="cancelled"],
.flight-status-pill[data-status-key="diverted"],
.flight-status-pill[data-status-key="arrived"],
.flight-status-pill[data-status-key="enroute"],
.flight-status-pill[data-status-key="on_time"]{
  /* keep default; icons convey status */
}


/* =========================
  PORTS MAP: popup + highlight
========================== */
.port-map-popup .pmp-title{ font-size: 0.95rem; margin-bottom: 2px; }
.port-map-popup .pmp-meta{ color: var(--muted); font-size: 0.82rem; margin-bottom: 6px; }
.port-map-popup .pmp-timeline{ color: var(--muted); font-size: 0.78rem; line-height: 1.35; margin-bottom: 8px; }
.port-map-popup .pmp-mini-title{ color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.port-map-popup .pmp-ships{ margin-bottom: 10px; }
.port-map-popup .pmp-ship-list{ display:flex; flex-wrap:wrap; gap:6px; }
.port-map-popup .pmp-ship-chip{ display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:999px; border:1px solid var(--surface-border); background:var(--surface); color:var(--text); font-size:0.76rem; }
.btn.btn-sm{ padding: 8px 10px; border-radius: 10px; font-size: 0.9rem; }

.port-stat-row.pulse-highlight{
  outline: 2px solid rgba(56,189,248,.55);
  box-shadow: 0 0 0 6px rgba(56,189,248,.10);
  transition: box-shadow .25s ease, outline-color .25s ease;
}


/* === AGENDA_DROPDOWN_CSS_V2 === */
.planner-add select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--surface-border);
  background: var(--surface);
  color: var(--text);
  outline: none;
}
.planner-add select:focus{
  box-shadow: 0 0 0 3px rgba(56,189,248,.18);
}


/* =========================
   Trip buffers (Pre/Post)
========================== */
.trip-buffer-row input[type="number"]{
  width:100%;
}
.trip-buffer-row .help-text.hint{
  margin-top:2px;
  font-size:.7rem;
  opacity:.9;
}

@media (max-width:600px){
  .trip-buffer-row{ gap:10px; }
  .trip-buffer-row .field{ flex:1 1 140px; }
  .trip-buffer-row input[type="number"]{ height:42px; border-radius:12px; }
}













/* =========================
   DOC VIEWER MODAL
========================== */
.doc-viewer-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:14px;
}
.doc-viewer-overlay.show{ display:flex; }

.doc-viewer-modal{
  width:min(1100px, 96vw);
  height:min(760px, 88vh);
  background:var(--card-bg, #111827);
  border:1px solid var(--shell-border, rgba(148,163,184,.25));
  border-radius:16px;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.doc-viewer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--shell-border, rgba(148,163,184,.25));
}
.doc-viewer-title{
  font-weight:700;
  font-size:14px;
  color:var(--text, #e5e7eb);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.doc-viewer-body{
  flex:1;
  background:rgba(0,0,0,.10);
}
.doc-viewer-frame{
  width:100%;
  height:100%;
  border:0;
  background:transparent;
}


/* =========================
  TODAY ON YOUR TRIP (Dashboard)
========================== */

/* Dashboard KPI card polish */
#kpi-countdown{ font-size:1.1em; line-height:1.05; }
#kpi-perks{ gap:10px; flex-wrap:wrap; }
#kpi-latitude-status{ font-size:1.8rem; }
.lat-tracker{ margin-top:8px; }
.today-card{ border-left:4px solid var(--accent); }
.today-body{ display:flex; flex-direction:column; gap:10px; }
.today-line{ font-size:14px; }
.today-ship{ font-weight:700; }
.today-port{ font-weight:600; }
.today-agenda{ display:flex; flex-direction:column; gap:8px; }
.today-item{ padding:10px 12px; border:1px solid rgba(148,163,184,.20); border-radius:12px; background: rgba(2,6,23,.25); }
.today-item .t-time{ font-weight:700; margin-right:6px; }
.today-item .t-activity{ font-weight:600; }
.today-item .t-notes{ margin-top:6px; opacity:.9; }
.today-empty{ opacity:.75; font-size:13px; padding:8px 0; }


.command-center-card{
  position:relative;
  overflow:hidden;
  margin-top:28px;
  padding:20px;
  border-radius:22px;
  border:1px solid var(--card-border);
  background:var(--card-bg);
  box-shadow:var(--card-shadow);
}
.command-center-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.command-center-header{
  align-items:flex-start;
  gap:12px;
}
.command-center-title-wrap h2{
  margin:0;
  font-size:clamp(1.25rem, 2.4vw, 1.9rem);
  line-height:1.08;
}
.command-center-kicker{
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
.command-center-card .card-header small{
  display:block;
  margin-top:6px;
}
.command-center-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(148,163,184,.22);
  white-space:nowrap;
  background:rgba(148,163,184,.14);
}
.command-center-badge.upcoming{
  color:#60a5fa;
  background:rgba(96,165,250,.14);
}
.command-center-badge.active{
  color:#22c55e;
  background:rgba(34,197,94,.14);
}
.command-center-badge.past{
  color:var(--muted);
  background:rgba(148,163,184,.14);
}
.command-center-meta{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.cc-meta-item{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(255,255,255,.04);
  min-width:0;
}
.cc-meta-label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}
.cc-meta-item strong{
  display:block;
  font-size:17px;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
}
.command-center-details{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.command-center-line{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(2,6,23,.18);
  font-size:14px;
}
.command-center-line strong{
  font-weight:800;
}
.command-center-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}
.command-center-smart{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.command-center-smart:empty{
  display:none;
}
.command-center-health{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  max-width:100%;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(255,255,255,.06);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}
.command-center-health.ready{
  color:#22c55e;
  background:rgba(34,197,94,.12);
}
.command-center-health.planning{
  color:#f59e0b;
  background:rgba(245,158,11,.12);
}
.command-center-health.action{
  color:#f97316;
  background:rgba(249,115,22,.12);
}
.command-center-insight-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.command-center-panel{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(2,6,23,.18);
}
.command-center-panel h3{
  margin:0 0 8px;
  font-size:12px;
  line-height:1.1;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.command-center-alert-list,
.command-center-today-list{
  display:grid;
  gap:8px;
}
.command-center-alert,
.command-center-today-item{
  font-size:14px;
  line-height:1.35;
}
.command-center-alert.urgent{
  color:#fb923c;
  font-weight:700;
}
.command-center-next-step{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(56,189,248,.22);
  background:rgba(56,189,248,.10);
  font-size:14px;
}
.command-center-next-step strong{
  font-weight:800;
}
.command-center-next-step .muted{
  color:var(--muted);
  font-size:13px;
}
.command-center-today-time{
  font-weight:800;
}
.command-center-empty{
  font-size:14px;
  color:var(--muted);
}
@media (max-width: 640px){
  .command-center-insight-grid{ grid-template-columns:1fr; }
}
@media (max-width: 1400px){
  .command-center-meta{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px){
  .command-center-header{ flex-direction:column; }
  .command-center-meta{ grid-template-columns:1fr; }
  .command-center-actions .btn{ width:100%; }
}

/* =========================
   ROUTE PILL (Ports Map)
========================== */
.route-pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  margin-left:10px;
  flex-wrap:wrap;
}
.route-pill-label{ font-size:13px; font-weight:600; }
.route-pill-meta{ font-size:12px; color: rgba(31,41,55,.75); }
.route-pill-btn{ padding:6px 10px; border-radius:999px; min-width:64px; text-align:center; }
.route-btn.is-active{ opacity:0.65; }
.route-btn.is-active::after{ content:""; }
.route-btn.is-active{ pointer-events:auto; }
.route-btn.is-active{ }


.route-timeline-card{
  margin-top:12px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:18px;
  padding:12px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(248,250,252,.92));
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
}
.route-timeline-title{
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.route-timeline-line{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  line-height:1.4;
}
.route-stop{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.9);
  border:1px solid rgba(148,163,184,.24);
  font-size:.9rem;
  font-weight:600;
  white-space:nowrap;
}
.route-stop-sea{
  background: rgba(224,242,254,.9);
}
.route-stop-label{ font-weight:700; }
.route-arrow{
  color: var(--muted);
  font-weight:700;
}

/* Timeline modal route chips should follow site theme */
.timeline-modal .route-timeline-card{
  background: var(--surface-2, rgba(15,23,42,.92));
  border-color: var(--card-border, rgba(148,163,184,.22));
  box-shadow: var(--card-shadow, 0 10px 26px rgba(0,0,0,.18));
}
.timeline-modal .route-stop{
  background: var(--chip-bg, rgba(15,23,42,.8));
  border-color: var(--border, rgba(148,163,184,.22));
  color: var(--text, #e5e7eb);
}
.timeline-modal .route-stop-sea{
  background: color-mix(in srgb, var(--accent, #38bdf8) 14%, var(--chip-bg, rgba(15,23,42,.8)));
}
body.light .timeline-modal .route-timeline-card{
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
}
body.light .timeline-modal .route-stop{
  background: rgba(255,255,255,.92);
  color: var(--text, #020617);
}
body.light .timeline-modal .route-stop-sea{
  background: rgba(224,242,254,.92);
}

.port-journal-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
.port-journal-card{
  border:1px solid rgba(148,163,184,.18);
  border-radius:14px;
  padding:12px 12px 10px;
  background: rgba(255,255,255,.55);
}
.port-journal-title{
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--muted);
  font-weight:800;
  margin-bottom:8px;
}
.port-journal-list{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:6px;
  font-size:.9rem;
}
.port-journal-empty{
  color: var(--muted);
}
@media (max-width: 820px){
  .port-journal-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .route-timeline-card{ padding:10px 12px; }
  .route-timeline-title{ font-size:.9rem; }
  .route-stop{ font-size:.84rem; padding:5px 9px; }
}

.route-ship-icon, .route-end-icon{
  background: transparent;
  border: 0;
  font-size: 18px;
  line-height: 18px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
  user-select: none;
}


/* =========================
   STATUS + SHIPS LAYOUT
========================= */
.status-layout{
  display:grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, .95fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}
.status-left{ min-width:0; }
.status-right{ min-width:0; }
.ports-stats-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
  align-items: stretch;
  grid-auto-flow: row dense;
}
.ships-panel{
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--kpi-shadow, 0 10px 26px rgba(0,0,0,.40));
  position: sticky;
  top: 10px;
}
.ships-panel-title{
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ships-panel-count{
  margin-top: 4px;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
}
.ships-panel-sub{
  margin-top: 2px;
  font-size: .76rem;
  color: var(--muted);
}
.ships-panel-most,
.ships-panel-list-wrap{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
}
.ships-panel-mini-title{
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.ships-panel-most-value{
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.35;
}
.ships-panel-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  max-height: 420px;
  overflow: auto;
}
.ships-panel-list li{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: .86rem;
}
.ship-rank{
  min-width: 1.8rem;
  color: var(--muted);
}
.ship-name{
  color: var(--text);
  min-width: 0;
}
.ship-count{
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.port-stat-head{
  min-width: 0;
  display:flex;
  flex-direction: column;
  gap: 4px;
}
.port-stat-summary{
  align-items: flex-start;
}
.port-stat-meta{
  align-items: flex-end;
  flex: 0 0 auto;
  display:none;
}
.port-stat-sub-main{
  font-size: .8rem;
}
.port-stat-timeline{
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.35;
}
@media (max-width: 980px){
  .status-layout{
    grid-template-columns: 1fr;
  }
  .ships-panel{
    position: static;
  }
}
@media (max-width: 720px){
  .ports-stats-grid{
    grid-template-columns: 1fr;
  }
  .port-stat-summary{
    flex-direction: column;
    align-items: flex-start;
  }
  .port-stat-meta{
    align-items: flex-start;
  }
}


/* Ports polish */
.ports-stat-achievements-card .ports-achievements-list{
  display:grid;
  gap:6px;
  margin-top:8px;
  color:var(--text);
  font-size:.84rem;
  line-height:1.35;
}
.ships-panel-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.ship-item-main{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:baseline;
}
.ship-count-text{
  color:var(--muted);
  font-size:.82rem;
}
.port-stat-achievements{
  font-size:.76rem;
  color:var(--text);
  opacity:.92;
  margin-top:4px;
}
.port-stat-row + .port-stat-row{
  margin-top:10px;
}
.port-stat-summary{
  box-shadow: inset 0 -1px 0 rgba(148,163,184,.12);
}


.ports-stat-achievements-card{
  grid-column: 1;
  grid-row: 2;
  display:flex;
  flex-direction:column;
  height:100%;
}
.ports-stat-top5-card{
  grid-column: 2 / span 2;
  grid-row: 2;
  display:flex;
  flex-direction:column;
  height:100%;
}
.ports-top5-list{
  list-style:none;
  margin:8px 0 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}
.ports-top5-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(46px,.7fr) auto;
  align-items:center;
  gap:8px;
  min-width:0;
}
.ports-top5-rank{
  font-size:.9rem;
  line-height:1;
}
.ports-top5-name{
  min-width:0;
  font-size:.82rem;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ports-top5-bar{
  height:7px;
  border-radius:999px;
  background:rgba(148,163,184,.18);
  overflow:hidden;
}
.ports-top5-bar-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}
.ports-top5-count{
  font-size:.8rem;
  font-weight:800;
  color:var(--muted);
}
@media (max-width: 720px){
  .ports-stat-achievements-card,
  .ports-stat-top5-card{
    grid-column: span 1;
    grid-row: auto;
    height: auto;
  }
}


/* =========================
   STATUS POLISH UPGRADES
========================= */
.status-layout{
  gap:18px;
  margin-bottom:22px;
}
.ports-stats-grid{
  gap:14px;
  margin-bottom:18px;
}
.ports-stat{
  border-radius:16px;
  padding:14px;
}
.ports-stat-label{
  font-size:.78rem;
  color:var(--muted);
  letter-spacing:.04em;
  text-transform:none;
}
.ports-stat-kpi{
  min-height:138px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:4px;
}
.ports-stat-icon{
  font-size:1rem;
  opacity:.9;
}
.ports-stat-kpi-value{
  margin-top:2px;
  font-size:2rem;
  line-height:1;
  font-weight:800;
  letter-spacing:-.02em;
}
.ports-stat-kpi-text{
  margin-top:2px;
  font-size:1.55rem;
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.ports-stat-kpi-label{
  font-size:.86rem;
  color:var(--text);
  font-weight:700;
}
.ports-stat-sub{
  margin-top:auto;
  font-size:.76rem;
  color:var(--muted);
}
.ports-stat-achievements-card,
.ports-stat-top5-card{
  min-height:150px;
}
.ports-stat-achievements-card .ports-achievements-list{
  margin-top:10px;
  gap:8px;
  font-size:.95rem;
}
.ports-top5-list{
  margin-top:10px;
  gap:8px;
}
.ports-top5-name{
  font-size:.9rem;
}
.ports-top5-bar{
  height:8px;
  border-radius:999px;
}
.ports-top5-count{
  font-size:.88rem;
}
.ships-panel{
  border-radius:18px;
  padding:16px;
}
.ships-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.ships-panel-title{
  font-size:.82rem;
  letter-spacing:.12em;
}
.ships-panel-badge{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
  padding:4px 8px;
  border:1px solid var(--surface-border);
  border-radius:999px;
  background:rgba(148,163,184,.08);
}
.ships-panel-kpi{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 0 2px;
}
.ships-panel-kpi-icon{
  font-size:1.25rem;
  line-height:1;
}
.ships-panel-count{
  margin-top:0;
  font-size:2.15rem;
  font-weight:800;
  line-height:1;
}
.ships-panel-sub{
  margin-top:4px;
  font-size:.8rem;
}
.ships-panel-most,
.ships-panel-list-wrap{
  margin-top:16px;
  padding-top:14px;
}
.ships-panel-mini-title{
  font-size:.74rem;
  letter-spacing:.12em;
  margin-bottom:8px;
}
.ships-panel-most-value{
  font-size:.96rem;
  line-height:1.45;
}
.ships-years-list{
  display:grid;
  gap:8px;
}
.ships-year-item{
  display:grid;
  grid-template-columns: 48px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
}
.ships-year-label{
  font-size:.84rem;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.ships-year-bar{
  height:8px;
  border-radius:999px;
  background:rgba(148,163,184,.18);
  overflow:hidden;
}
.ships-year-bar-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--success), var(--accent));
}
.ships-year-count{
  font-size:.82rem;
  font-weight:700;
  color:var(--muted);
}
.ships-panel-empty{
  font-size:.84rem;
  color:var(--muted);
}
@media (max-width: 980px){
  
}
@media (max-width: 720px){
  .ports-stat-kpi{
    min-height:auto;
  }
  .ports-stat-kpi-text{
    font-size:1.35rem;
  }
  .ships-panel-header{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* =========================
   STATUS PREMIUM REFRESH
========================= */
.status-layout{
  grid-template-columns: minmax(0, 1.78fr) minmax(320px, 1fr);
  gap:20px;
  align-items:start;
}
.status-left,
.status-right{
  min-width:0;
}
.ports-stats-grid{
  gap:16px;
  margin-bottom:20px;
}
.ports-stat{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  padding:16px 16px 15px;
  background:
    radial-gradient(circle at top right, rgba(56,189,248,.10), transparent 34%),
    radial-gradient(circle at bottom left, rgba(8,120,189,.08), transparent 38%),
    var(--kpi-bg, rgba(15,23,42,.90));
  border:1px solid rgba(148,163,184,.22);
  box-shadow:0 12px 30px rgba(15,23,42,.10);
}
body.light .ports-stat{
  background:
    radial-gradient(circle at top right, rgba(56,189,248,.12), transparent 34%),
    radial-gradient(circle at bottom left, rgba(8,120,189,.08), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.95));
  border:1px solid rgba(148,163,184,.32);
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
.ports-stat::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg, rgba(56,189,248,.9), rgba(8,120,189,.85));
  opacity:.85;
}
.ports-stat-kpi{
  min-height:154px;
  gap:8px;
}
.ports-stat-icon{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  font-size:1.05rem;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(148,163,184,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
body.light .ports-stat-icon{
  background:rgba(255,255,255,.8);
}
.ports-stat-kpi-value{
  font-size:2.35rem;
  font-weight:850;
  letter-spacing:-.03em;
}
.ports-stat-kpi-text{
  font-size:1.95rem;
  line-height:1;
  letter-spacing:-.035em;
  max-width:12ch;
}
.ports-stat-kpi-label{
  font-size:1rem;
  font-weight:800;
  letter-spacing:-.01em;
}
.ports-stat-sub{
  margin-top:auto;
  font-size:.84rem;
  color:var(--muted);
  line-height:1.35;
}
.ports-stat-achievements-card,
.ports-stat-top5-card{
  min-height:166px;
}
.ports-stat-label{
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--muted);
}
.ports-achievements-list{
  margin-top:12px;
  gap:10px;
}
.ports-achievements-list div{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:1rem;
  font-weight:700;
}
.ports-top5-list{
  margin-top:12px;
  gap:10px;
}
.ports-top5-item{
  grid-template-columns:auto minmax(0, 1.4fr) minmax(88px, .9fr) auto;
  gap:10px;
}
.ports-top5-rank{
  width:24px;
  text-align:center;
  font-weight:800;
}
.ports-top5-name{
  font-size:1rem;
  font-weight:750;
}
.ports-top5-bar{
  height:10px;
  border-radius:999px;
  background:rgba(148,163,184,.18);
}
.ports-top5-bar-fill{
  background:linear-gradient(90deg, rgba(56,189,248,.95), rgba(8,120,189,.92));
  box-shadow:0 2px 8px rgba(99,102,241,.18);
}
.ports-top5-count{
  font-size:.92rem;
  font-weight:800;
  color:var(--text);
}
.ships-panel{
  padding:18px;
  border-radius:22px;
  background:
    radial-gradient(circle at top right, rgba(56,189,248,.12), transparent 28%),
    radial-gradient(circle at bottom left, rgba(34,197,94,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.94));
  border:1px solid rgba(148,163,184,.34);
  box-shadow:0 14px 30px rgba(15,23,42,.10);
}
body:not(.light) .ships-panel{
  background:
    radial-gradient(circle at top right, rgba(56,189,248,.12), transparent 28%),
    radial-gradient(circle at bottom left, rgba(34,197,94,.10), transparent 34%),
    linear-gradient(180deg, rgba(15,23,42,.92), rgba(2,6,23,.96));
}
.ships-panel-header{
  margin-bottom:14px;
}
.ships-panel-title{
  font-size:.84rem;
  font-weight:800;
  letter-spacing:.16em;
}
.ships-panel-badge{
  background:rgba(255,255,255,.7);
  border-color:rgba(148,163,184,.34);
  font-size:.66rem;
  font-weight:700;
}
body:not(.light) .ships-panel-badge{
  background:rgba(148,163,184,.10);
}
.ships-panel-kpi{
  gap:14px;
  padding:14px 14px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(148,163,184,.22);
}
body:not(.light) .ships-panel-kpi{
  background:rgba(255,255,255,.03);
}
.ships-panel-kpi-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.25rem;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(148,163,184,.28);
}
body:not(.light) .ships-panel-kpi-icon{
  background:rgba(255,255,255,.08);
}
.ships-panel-count{
  font-size:2.45rem;
  letter-spacing:-.03em;
}
.ships-panel-sub{
  font-size:.9rem;
}
.ships-panel-most,
.ships-panel-list-wrap{
  margin-top:14px;
  padding:14px 14px 0;
  border-top:1px solid rgba(148,163,184,.24);
}
.ships-panel-mini-title{
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.ships-panel-most-value{
  font-size:1.06rem;
  font-weight:750;
}
.ships-years-list,
.ships-panel-list{
  margin-top:10px;
}
.ships-year-bar{
  height:10px;
}
.ships-panel-list li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:2px 0;
}
.ship-rank{
  width:26px;
  flex:0 0 26px;
  text-align:center;
  font-weight:800;
}
.ship-item-main{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.ship-name{
  font-weight:700;
}
.ship-count-text{
  color:var(--muted);
}
@media (max-width: 1200px){
  .status-layout{
    grid-template-columns:minmax(0, 1.5fr) minmax(300px, 1fr);
  }
  .ports-stat-kpi-text{
    font-size:1.72rem;
  }
}
@media (max-width: 980px){
  .status-layout{
    grid-template-columns:1fr;
  }
  .ships-panel{
    position:static;
  }
}
@media (max-width: 720px){
  .ports-stats-grid{
    grid-template-columns:1fr;
  }
  
  .ports-stat-kpi-text{
    font-size:1.45rem;
    max-width:none;
  }
  .ports-top5-item{
    grid-template-columns:auto minmax(0,1fr) 84px auto;
  }
}


/* =========================
   STATUS DASHBOARD TIGHTER LAYOUT
========================= */
.status-dashboard{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.status-row{
  display:grid;
  gap:12px;
  align-items:start;
}
.status-row-kpis{
  grid-template-columns:repeat(4, minmax(0,1fr));
}
.status-row-insights{
  grid-template-columns:minmax(210px,.8fr) minmax(320px,1.6fr);
}
.status-row-years,
.status-row-ships{
  grid-template-columns:1fr;
}
.status-row-ships{
  margin-bottom:14px;
}
.ports-stats-grid,
.status-layout,
.status-left,
.status-right{
  all:unset;
}
.ports-stat{
  padding:12px 13px 11px;
  border-radius:16px;
}
.ports-stat-kpi{
  min-height:112px;
}
.ports-stat-icon{
  width:26px;
  height:26px;
  border-radius:9px;
  font-size:.82rem;
}
.ports-stat-value{
  margin-top:6px;
}
.ports-stat-kpi-value{
  font-size:1.75rem;
  line-height:1.02;
}
.ports-stat-kpi-text{
  font-size:1.1rem;
  max-width:13ch;
  line-height:1.02;
}
.ports-stat-kpi-label{
  margin-top:4px;
  font-size:.72rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.ports-stat-sub{
  margin-top:6px;
  font-size:.69rem;
  line-height:1.22;
}
.ports-stat-label{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.ports-achievements-list{
  margin-top:8px;
  gap:5px;
}
.ports-achievements-list div{
  font-size:.76rem;
  gap:5px;
}
.ports-stat-achievements-card,
.ports-stat-top5-card{
  min-height:132px;
}
.years-card{
  min-height:auto;
}
.years-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.years-card-badge{
  font-size:.56rem;
  padding:3px 9px;
}
.ports-top5-list{
  margin-top:7px;
  gap:6px;
}
.ports-top5-item{
  grid-template-columns:auto minmax(0, 1.55fr) minmax(108px, .9fr) auto;
  gap:7px;
}
.ports-top5-rank,
.ports-top5-name,
.ports-top5-count{
  font-size:.76rem;
}
.ports-top5-bar{
  height:7px;
}
.ships-panel{
  padding:13px;
  border-radius:20px;
}
.ships-panel-header{
  margin-bottom:8px;
}
.ships-panel-title{
  font-size:.72rem;
}
.ships-panel-badge{
  font-size:.56rem;
  padding:3px 9px;
}
.ships-panel-kpi{
  padding:10px 11px 8px;
}
.ships-panel-kpi-icon{
  width:30px;
  height:30px;
  font-size:.92rem;
}
.ships-panel-count{
  font-size:1.75rem;
  line-height:1.02;
}
.ships-panel-sub,
.ships-panel-most-value,
.ship-name,
.ship-count-text,
.ships-year-label,
.ships-year-count{
  font-size:.76rem;
}
.ships-panel-most,
.ships-panel-list-wrap{
  margin-top:10px;
  padding:10px 11px 0;
}
.ships-panel-mini-title{
  font-size:.66rem;
  letter-spacing:.14em;
}
.ships-years-list,
.ships-panel-list{
  margin-top:7px;
}
.ships-year-item{
  gap:7px;
}
.ships-year-bar{
  height:7px;
  background:rgba(148,163,184,.18);
}
.ships-year-bar-fill{
  background:linear-gradient(90deg, rgba(56,189,248,.95), rgba(8,120,189,.92));
}
.ships-panel-list li{
  padding:1px 0;
}
.ship-rank{
  width:20px;
  flex-basis:20px;
  font-size:.74rem;
}
@media (max-width: 980px){
  .status-row-kpis,
  .status-row-insights{
    grid-template-columns:1fr;
  }
}
@media (max-width: 720px){
  .ports-stat-kpi,
  .ports-stat-achievements-card,
  .ports-stat-top5-card{
    min-height:auto;
  }
  .ports-top5-item{
    grid-template-columns:auto minmax(0,1fr) 90px auto;
  }
}


/* === Compact Status Dashboard overrides === */
.status-layout{gap:14px !important; margin-bottom:16px !important;}
.ports-stats-grid{gap:12px !important; margin-bottom:14px !important;}
.ports-stat{padding:12px 12px 11px !important; border-radius:16px !important;}
.ports-stat-kpi{min-height:118px !important; gap:4px !important;}
.ports-stat-icon{width:30px !important; height:30px !important; font-size:.92rem !important; border-radius:10px !important;}
.ports-stat-kpi-value{font-size:2rem !important;}
.ports-stat-kpi-text{font-size:1.45rem !important; line-height:1.02 !important; max-width:14ch !important;}
.ports-stat-kpi-label{font-size:.8rem !important; letter-spacing:.03em !important;}
.ports-stat-sub{font-size:.72rem !important; line-height:1.25 !important;}
.ports-stat-label,.ships-panel-title,.ships-panel-mini-title{font-size:.72rem !important; letter-spacing:.12em !important;}
.ports-stat-achievements-card,.ports-stat-top5-card{min-height:132px !important;}
.ports-achievements-list,.ports-stat-achievements-card .ports-achievements-list{margin-top:8px !important; gap:6px !important;}
.ports-achievements-list div,.ports-stat-achievements-card .ports-achievements-list div{font-size:.82rem !important; gap:6px !important;}
.ports-top5-list{margin-top:8px !important; gap:6px !important;}
.ports-top5-item{gap:8px !important; grid-template-columns:auto minmax(0,1.2fr) minmax(76px,.85fr) auto !important;}
.ports-top5-rank{font-size:.82rem !important; width:20px !important;}
.ports-top5-name{font-size:.82rem !important;}
.ports-top5-bar{height:8px !important;}
.ports-top5-count{font-size:.76rem !important;}
.ships-panel{padding:14px !important; border-radius:18px !important;}
.ships-panel-header{margin-bottom:10px !important;}
.ships-panel-badge{font-size:.58rem !important; padding:3px 7px !important;}
.ships-panel-kpi{padding:10px 12px !important; gap:10px !important; border-radius:14px !important;}
.ships-panel-kpi-icon{width:34px !important; height:34px !important; font-size:1rem !important; border-radius:12px !important;}
.ships-panel-count{font-size:2rem !important;}
.ships-panel-sub{font-size:.78rem !important; line-height:1.25 !important;}
.ships-panel-most,.ships-panel-list-wrap{margin-top:10px !important; padding:10px 10px 0 !important;}
.ships-panel-most-value{font-size:.92rem !important; line-height:1.35 !important;}
.ships-panel-list,.ships-years-list{margin-top:8px !important; gap:6px !important;}
.ships-panel-list li{font-size:.8rem !important; padding:1px 0 !important;}
.ship-rank{width:22px !important; flex-basis:22px !important;}
.ship-name{font-size:.8rem !important;}
.ship-count-text,.ship-count,.ships-year-count,.ships-year-label{font-size:.74rem !important;}
.ships-year-item{gap:8px !important; grid-template-columns:42px minmax(0,1fr) auto !important;}
.ships-year-bar{height:8px !important;}
@media (max-width: 720px){
  .status-layout{gap:10px !important; margin-bottom:12px !important;}
  .ports-stats-grid{gap:10px !important; margin-bottom:10px !important;}
  .ports-stat{padding:10px 10px 9px !important; border-radius:14px !important;}
  .ports-stat-kpi{min-height:auto !important; gap:3px !important;}
  .ports-stat-icon{width:28px !important; height:28px !important; font-size:.85rem !important;}
  .ports-stat-kpi-value{font-size:1.7rem !important;}
  .ports-stat-kpi-text{font-size:1.15rem !important; line-height:1.02 !important; max-width:none !important;}
  .ports-stat-kpi-label{font-size:.72rem !important;}
  .ports-stat-sub{font-size:.65rem !important;}
  .ports-achievements-list div,.ports-stat-achievements-card .ports-achievements-list div{font-size:.74rem !important;}
  .ports-top5-name{font-size:.74rem !important;}
  .ports-top5-item{grid-template-columns:auto minmax(0,1fr) minmax(56px,.7fr) auto !important; gap:6px !important;}
  .ports-top5-bar{height:6px !important;}
  .ships-panel{padding:10px !important; border-radius:16px !important;}
  .ships-panel-kpi{padding:8px 10px !important; gap:8px !important;}
  .ships-panel-kpi-icon{width:30px !important; height:30px !important; font-size:.9rem !important;}
  .ships-panel-count{font-size:1.75rem !important;}
  .ships-panel-sub{font-size:.7rem !important;}
  .ships-panel-mini-title,.ships-panel-title,.ports-stat-label{font-size:.64rem !important; letter-spacing:.1em !important;}
  .ships-panel-most-value{font-size:.82rem !important;}
  .ships-panel-list li{font-size:.72rem !important; gap:6px !important;}
  .ship-name{font-size:.72rem !important;}
  .ship-count-text,.ship-count,.ships-year-count,.ships-year-label{font-size:.66rem !important;}
  .ships-year-bar{height:6px !important;}
}


.map-reset-btn{
  background: rgba(255,255,255,.96);
  color: #0f172a;
  border: 1px solid rgba(15,23,42,.18);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(15,23,42,.18);
}
.map-reset-btn:hover{
  transform: translateY(-1px);
}


/* =========================
   STATUS V2 — SUPER COMPACT ANALYTICS LAYOUT
========================= */
.status-dashboard{
  gap:10px !important;
}
.status-row{
  gap:10px !important;
}
.status-row-kpis{
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
}
.status-row-insights{
  grid-template-columns:minmax(170px,.72fr) minmax(0,1.55fr) !important;
}
.ports-stat{
  padding:10px 11px 9px !important;
  border-radius:15px !important;
}
.ports-stat-kpi{
  min-height:92px !important;
  gap:2px !important;
}
.ports-stat-icon{
  width:24px !important;
  height:24px !important;
  border-radius:8px !important;
  font-size:.74rem !important;
}
.ports-stat-value{
  margin-top:4px !important;
}
.ports-stat-kpi-value{
  font-size:1.8rem !important;
  line-height:1 !important;
}
.ports-stat-kpi-text{
  font-size:1.2rem !important;
  line-height:1.02 !important;
  max-width:15ch !important;
}
.ports-stat-kpi-label{
  margin-top:3px !important;
  font-size:.7rem !important;
  letter-spacing:.07em !important;
}
.ports-stat-sub{
  margin-top:4px !important;
  font-size:.64rem !important;
  line-height:1.15 !important;
}
.ports-stat-achievements-card,
.ports-stat-top5-card,
.years-card,
.ships-panel{
  min-height:auto !important;
}
.ports-stat-label,
.ships-panel-title,
.ships-panel-mini-title{
  font-size:.66rem !important;
  letter-spacing:.13em !important;
}
.ports-achievements-list{
  margin-top:6px !important;
  gap:4px !important;
}
.ports-achievements-list div{
  font-size:.74rem !important;
  line-height:1.15 !important;
  gap:5px !important;
}
.years-card-header,
.ships-panel-header{
  margin-bottom:6px !important;
}
.years-card-badge,
.ships-panel-badge{
  font-size:.54rem !important;
  padding:2px 8px !important;
}
.ports-top5-list,
.ships-panel-list,
.ships-years-list{
  margin-top:6px !important;
  gap:5px !important;
}
.ports-top5-item{
  grid-template-columns:auto minmax(0,1.2fr) minmax(92px,.82fr) auto !important;
  gap:6px !important;
}
.ports-top5-rank,
.ports-top5-name,
.ports-top5-count,
.ship-name,
.ship-count-text,
.ship-count,
.ships-year-label,
.ships-year-count,
.ships-panel-sub,
.ships-panel-most-value{
  font-size:.72rem !important;
}
.ports-top5-bar,
.ships-year-bar{
  height:6px !important;
}
.ships-panel{
  padding:11px !important;
  border-radius:16px !important;
}
.ships-panel-kpi{
  padding:9px 10px 8px !important;
  gap:8px !important;
}
.ships-panel-kpi-icon{
  width:28px !important;
  height:28px !important;
  font-size:.9rem !important;
  border-radius:10px !important;
}
.ships-panel-count{
  font-size:1.8rem !important;
  line-height:1 !important;
}
.ships-panel-most,
.ships-panel-list-wrap{
  margin-top:8px !important;
  padding:8px 9px 0 !important;
}
.ships-year-item{
  gap:6px !important;
  grid-template-columns:40px minmax(0,1fr) auto !important;
}
.ship-rank{
  width:18px !important;
  flex-basis:18px !important;
  font-size:.7rem !important;
}

@media (max-width: 980px){
  .status-row-insights{
    grid-template-columns:1fr !important;
  }
}

@media (max-width: 720px){
  .status-dashboard,
  .status-row{
    gap:8px !important;
  }
  .port-favorite-btn{width:100%; justify-content:center; margin-left:0;}
  .status-row-kpis,
  .status-row-insights{
    grid-template-columns:1fr !important;
  }
  .ports-stat{
    padding:8px 9px 8px !important;
    border-radius:13px !important;
  }
  .ports-stat-kpi{
    min-height:auto !important;
    gap:2px !important;
  }
  .ports-stat-icon{
    width:22px !important;
    height:22px !important;
    font-size:.68rem !important;
  }
  .ports-stat-kpi-value{
    font-size:1.55rem !important;
  }
  .ports-stat-kpi-text{
    font-size:1.02rem !important;
    max-width:none !important;
  }
  .ports-stat-kpi-label{
    font-size:.63rem !important;
  }
  .ports-stat-sub,
  .ports-stat-label,
  .ports-achievements-list div,
  .ports-top5-rank,
  .ports-top5-name,
  .ports-top5-count,
  .ship-name,
  .ship-count-text,
  .ship-count,
  .ships-year-label,
  .ships-year-count,
  .ships-panel-sub,
  .ships-panel-most-value{
    font-size:.66rem !important;
  }
  .ports-top5-item{
    grid-template-columns:auto minmax(0,1fr) minmax(56px,.7fr) auto !important;
    gap:5px !important;
  }
  .ports-top5-bar,
  .ships-year-bar{
    height:5px !important;
  }
  .ships-panel{
    padding:9px !important;
  }
  .ships-panel-kpi{
    padding:8px 9px 7px !important;
  }
  .ships-panel-kpi-icon{
    width:24px !important;
    height:24px !important;
    font-size:.76rem !important;
  }
  .ships-panel-count{
    font-size:1.55rem !important;
  }
  .ships-panel-most,
  .ships-panel-list-wrap{
    margin-top:6px !important;
    padding:7px 8px 0 !important;
  }
}


/* Ships Sailed collapsible panel */
.ships-panel-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.ships-panel-toggle{
  appearance:none;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(15,23,42,.5);
  color:var(--text);
  border-radius:999px;
  padding:4px 10px;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
}
.ships-panel-toggle:hover{
  transform:translateY(-1px);
}
.ships-panel-body.is-collapsed{
  display:none;
}


/* Ships Sailed compact analytics refresh */
.ships-panel{
  position:relative;
  overflow:hidden;
}
.ships-panel::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg, rgba(56,189,248,.95), rgba(8,120,189,.9));
  opacity:.9;
}
.ships-panel-body{
  display:block;
}
.ships-panel-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.ships-panel-toggle,
.ships-panel-link{
  appearance:none;
  border:1px solid rgba(148,163,184,.34);
  background:rgba(255,255,255,.72);
  color:var(--text);
  border-radius:999px;
  padding:6px 10px;
  font:inherit;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
body:not(.light) .ships-panel-toggle,
body:not(.light) .ships-panel-link{
  background:rgba(255,255,255,.05);
}
.ships-panel-summary-strip{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
.ships-mini-stat{
  min-width:0;
  border-radius:16px;
  padding:12px 12px 10px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(148,163,184,.20);
}
body:not(.light) .ships-mini-stat{
  background:rgba(255,255,255,.04);
}
.ships-mini-stat-icon{
  font-size:1rem;
  line-height:1;
  margin-bottom:8px;
}
.ships-mini-stat-value{
  font-size:1.7rem;
  font-weight:850;
  letter-spacing:-.03em;
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ships-mini-stat-value--text{
  font-size:1rem;
  letter-spacing:-.01em;
}
.ships-mini-stat-name{
  margin-top:2px;
  font-size:.88rem;
  font-weight:700;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ships-mini-stat-label{
  margin-top:4px;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.ships-panel-most--compact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.ships-panel-list-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.ships-panel-list--leaderboard{
  display:grid;
  gap:8px;
}
.ship-row--leaderboard{
  display:grid !important;
  grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center !important;
  gap:10px !important;
  padding:0 !important;
}
.ship-row--leaderboard .ship-rank{
  width:30px;
  flex:0 0 30px;
  text-align:center;
  font-size:.95rem;
}
.ship-row--leaderboard .ship-item-main{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:5px;
  min-width:0;
}
.ship-row--leaderboard .ship-name{
  font-weight:750;
  font-size:.97rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ship-bar{
  display:block;
  width:100%;
  min-width:0;
  height:6px;
  border-radius:999px;
  background:rgba(148,163,184,.18);
  overflow:hidden;
}
.ship-bar-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(56,189,248,.95), rgba(8,120,189,.92));
}
.ship-count-pill{
  min-width:28px;
  text-align:center;
  border-radius:999px;
  padding:4px 8px;
  font-size:.78rem;
  font-weight:800;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(148,163,184,.28);
}
body:not(.light) .ship-count-pill{
  background:rgba(255,255,255,.06);
}
.ships-panel-list--extra.is-hidden{
  display:none;
}
#ships-sailed-panel.is-collapsed{
  display:none;
}
@media (max-width: 720px){
  .ships-panel-summary-strip{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .ships-mini-stat:last-child{
    grid-column:1 / -1;
  }
  .ships-panel-most--compact,
  .ships-panel-list-head{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* Ships Sailed polish: most sailed card + animated leaderboard bars */
.status-row-ships{
  margin-bottom:22px;
}
.ships-mini-stat--most-sailed{
  justify-content:flex-start;
}
.ships-mini-stat-value--most{
  font-size:1.02rem;
  line-height:1.15;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
.ships-mini-stat-name--most{
  margin-top:6px;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.ship-bar-fill{
  display:block;
  width:var(--ship-bar-width, 0%);
  min-width:8px;
  transform-origin:left center;
  transition:width .72s cubic-bezier(.22,.61,.36,1);
  will-change:width;
}
.ships-panel-list--animated .ship-bar-fill{
  width:var(--ship-bar-width, 0%);
}

.hidden{ display:none !important; }


.status-toolbar{display:flex;justify-content:flex-end;align-items:center;margin:0 0 10px 0}
.status-toolbar-btn{font-weight:700}
.timeline-modal-open{overflow:hidden}
.timeline-modal{position:fixed;inset:0;z-index:9999}
.timeline-modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.72);backdrop-filter:blur(6px)}
.timeline-modal-dialog{position:relative;height:100%;width:min(1100px,100%);margin:0 auto;background:var(--card-bg,#0f172a);color:var(--text,#e5e7eb);border-left:1px solid var(--card-border,rgba(148,163,184,.18));border-right:1px solid var(--card-border,rgba(148,163,184,.18));display:flex;flex-direction:column;box-shadow:var(--card-shadow,0 20px 60px rgba(0,0,0,.35))}
.timeline-modal-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;border-bottom:1px solid var(--card-border,rgba(148,163,184,.16));position:sticky;top:0;background:var(--surface-2,rgba(15,23,42,.96));z-index:2}
.timeline-modal-header h2{margin:2px 0 0;font-size:1.35rem}
.timeline-modal-kicker{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#94a3b8)}
.timeline-modal-close{border:1px solid var(--card-border,rgba(148,163,184,.25));background:transparent;color:inherit;border-radius:999px;padding:10px 14px;font-weight:700;cursor:pointer}
.timeline-modal-body{padding:20px;overflow:auto}
.timeline-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--card-border,rgba(148,163,184,.16));background:var(--surface-2,rgba(15,23,42,.96));position:sticky;bottom:0;z-index:3}
.timeline-modal-close-bottom{display:none}
.timeline-year-group + .timeline-year-group{margin-top:20px}
.timeline-year-label{font-size:1.2rem;font-weight:800;margin-bottom:10px}
.timeline-year-items{display:grid;gap:12px}
.timeline-trip-card{border:1px solid var(--card-border,rgba(148,163,184,.18));border-radius:18px;background:var(--row-bg,rgba(15,23,42,.55));overflow:hidden;box-shadow:var(--card-shadow,0 10px 26px rgba(0,0,0,.18))}
.timeline-trip-summary{list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 18px;cursor:pointer}
.timeline-trip-summary::-webkit-details-marker{display:none}
.timeline-trip-title{font-weight:800;font-size:1rem}
.timeline-trip-meta{margin-top:4px;color:var(--muted,#94a3b8);font-size:.95rem}
.timeline-trip-chevron{font-size:.85rem;color:var(--muted,#94a3b8);font-weight:700}
.timeline-trip-card[open] .timeline-trip-chevron{color:var(--text,#e5e7eb)}
.timeline-trip-details{padding:0 18px 18px}
.timeline-trip-route{padding:12px 0 8px;border-top:1px solid var(--border,rgba(148,163,184,.12))}
.timeline-trip-stats{display:flex;flex-wrap:wrap;gap:8px 10px;margin:8px 0 10px}
.timeline-trip-stats span,.timeline-trip-newports{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:var(--chip-bg,rgba(148,163,184,.12));font-size:.92rem;border:1px solid var(--border,rgba(148,163,184,.18))}
.timeline-trip-newports{display:flex;flex-wrap:wrap}
.timeline-trip-actions{margin-top:12px}
.timeline-empty{padding:22px;border:1px dashed var(--card-border,rgba(148,163,184,.24));border-radius:16px;color:var(--muted,#94a3b8)}
body.light .timeline-modal-backdrop{background:rgba(148,163,184,.32)}
body.light .timeline-modal-close{background:rgba(255,255,255,.72)}
body.light .timeline-trip-card{box-shadow:0 12px 28px rgba(15,23,42,.08)}
@media (max-width: 700px){
  .timeline-modal-header{padding:14px 14px 12px;align-items:flex-start}
  .timeline-modal-header h2{font-size:1.1rem}
  .timeline-modal-body{padding:14px 14px 90px}
  .timeline-modal-footer{padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));justify-content:center}
  .timeline-modal-close-top{display:none}
  .timeline-modal-close-bottom{display:inline-flex;align-items:center;justify-content:center;width:min(100%,360px)}
  .timeline-trip-summary{padding:14px}
  .timeline-trip-details{padding:0 14px 14px}
  .timeline-trip-stats span,.timeline-trip-newports{font-size:.88rem}
}


/* Shared profile read-only mode */
body.shared-profile #login-backdrop,
body.shared-profile #trip-form-card,
body.shared-profile #open-add-trip,
body.shared-profile #backup-btn,
body.shared-profile #restore-btn,
body.shared-profile label[for="import-input"],
body.shared-profile #import-input,
body.shared-profile #change-user-btn,
body.shared-profile #share-profile-btn,
body.shared-profile [data-private-docs],
body.shared-profile .planner-add,
body.shared-profile .doc-delete,
body.shared-profile .planner-docs-upload{ display:none !important; }
body.shared-profile .trip-row{ cursor:default; }
body.shared-profile .trip-actions .btn-danger{ display:none !important; }


.payment-tracker{
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(56,189,248,.08), rgba(8,120,189,.06));
}

.payment-progress{
  grid-column:1 / -1;
  padding:10px;
  border-radius:14px;
  border:1px solid var(--row-border);
  background:var(--row-bg);
}
.payment-progress-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  font-size:.84rem;
  color:var(--text);
}
.payment-progress-top span{ color:var(--muted); font-weight:700; }
.payment-progress-bar{
  height:9px;
  border-radius:999px;
  overflow:hidden;
  margin-top:8px;
  background:rgba(148,163,184,.22);
}
.payment-progress-bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(34,174,234,.95), rgba(16,185,129,.95));
  transition:width .25s ease;
}

.payment-summary{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap:8px;
  margin: 10px 0 12px;
}
.payment-stat{
  padding: 10px;
  border-radius: 12px;
  background: var(--row-bg);
  border:1px solid var(--row-border);
}
.payment-stat-label{ font-size:.72rem; color:var(--muted); }
.payment-stat-value{ font-size:.92rem; font-weight:700; color:var(--text); margin-top:2px; }
.payment-list{ display:grid; gap:8px; }
.payment-empty{ font-size:.82rem; color:var(--muted); }
.payment-row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--row-border);
  background: var(--row-bg);
}
.payment-row-top{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  font-size:.82rem;
}
.payment-row-meta{ font-size:.76rem; color:var(--muted); margin-top:2px; }
.btn-small{ padding:6px 10px; font-size:.78rem; }
@media (max-width: 640px){
  .payment-summary{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-row{ grid-template-columns: 1fr; }
}


/* =========================
   COMMAND CENTER STATUS HELP
========================== */
.command-center-health-help{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:800;
  padding:0;
  cursor:pointer;
  opacity:.9;
  line-height:1;
}
.command-center-health-help:hover{
  opacity:1;
  text-decoration:underline;
}
.status-help-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.55);
}
.status-help-modal{
  width:min(720px, 96vw);
  max-height:min(88vh, 960px);
  overflow:auto;
  background:var(--surface, rgba(17,24,39,.98));
  color:var(--text, #e5e7eb);
  border:1px solid var(--surface-border, rgba(148,163,184,.25));
  border-radius:20px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.status-help-header{
  position:sticky;
  top:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 12px;
  background:inherit;
  border-bottom:1px solid rgba(148,163,184,.18);
}
.status-help-header h3{
  margin:0;
  font-size:1.05rem;
}
.status-help-close{
  appearance:none;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.06);
  color:var(--text, #e5e7eb);
  width:34px;
  height:34px;
  border-radius:999px;
  cursor:pointer;
  font-size:16px;
}
.status-help-body{
  padding:16px 18px 18px;
}
.status-help-body p{
  margin:0 0 10px;
  line-height:1.45;
}
.status-help-body h4{
  margin:0 0 12px;
  font-size:.95rem;
}
.status-help-item{
  margin:0 0 14px;
}
.status-help-item strong{
  display:block;
  margin-bottom:4px;
}
.status-help-body hr{
  border:0;
  border-top:1px solid rgba(148,163,184,.18);
  margin:16px 0;
}
.status-help-note{
  color:var(--muted);
  font-size:.95rem;
}


.status-help-handle{
  display:none;
}

@media (max-width: 640px){
  .status-help-overlay{
    align-items:flex-end;
    justify-content:center;
    padding:0;
    background:rgba(0,0,0,.62);
  }
  .status-help-modal{
    width:100%;
    max-height:85vh;
    margin:0;
    border-radius:18px 18px 0 0;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    border-left:0;
    border-right:0;
    border-bottom:0;
    box-shadow:0 -10px 40px rgba(0,0,0,.45);
    animation:statusHelpSheetUp .22s ease-out;
    -webkit-overflow-scrolling:touch;
    padding-bottom:max(10px, env(safe-area-inset-bottom));
  }
  .status-help-handle{
    display:block;
    width:42px;
    height:5px;
    border-radius:999px;
    background:rgba(148,163,184,.45);
    margin:10px auto 2px;
  }
  .status-help-header{
    padding:10px 16px 10px;
  }
  .status-help-header h3{
    font-size:1rem;
  }
  .status-help-close{
    width:36px;
    height:36px;
    font-size:18px;
    flex:0 0 36px;
  }
  .status-help-body{
    padding:10px 16px 18px;
  }
  .status-help-body p{
    font-size:.96rem;
    line-height:1.5;
    margin:0 0 12px;
  }
  .status-help-body h4{
    margin:4px 0 10px;
    font-size:.95rem;
  }
  .status-help-item{
    margin:0 0 12px;
  }
  .status-help-item strong{
    margin-bottom:3px;
    font-size:.98rem;
  }
  .status-help-note{
    font-size:.9rem;
    padding-bottom:4px;
  }
}

@keyframes statusHelpSheetUp{
  from{
    transform:translateY(28px);
    opacity:.0;
  }
  to{
    transform:translateY(0);
    opacity:1;
  }
}


/* Hide old checklist view; alerts now open in badge panel */
#view-checklist{ display:none !important; }

/* Alerts badge button */
.tab-alerts-btn,
.m-alerts-btn{ position:relative; }
.alerts-count-badge,
.m-alert-count-badge{
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  color:#fff;
  font-size:.66rem;
  font-weight:800;
  line-height:1;
  box-shadow:0 0 0 2px rgba(2,6,23,.18);
}
.alerts-count-badge{ margin-left:2px; }
.m-alert-count-badge{
  position:absolute;
  top:6px;
  right:10px;
}
.tab-alerts-btn.has-alerts .icon,
.m-alerts-btn.has-alerts .m-ico{
  animation:alertsPulse 1.6s ease-in-out infinite;
}

/* Alerts panel */
.alerts-panel-overlay{
  position:fixed;
  inset:0;
  z-index:10020;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:88px 18px 18px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
}
.alerts-panel-modal{
  width:min(760px,100%);
  max-height:min(82vh,900px);
  overflow:auto;
  background:var(--surface, rgba(17,24,39,.98));
  color:var(--text,#e5e7eb);
  border:1px solid var(--surface-border, rgba(148,163,184,.25));
  border-radius:20px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.alerts-panel-handle{ display:none; }
.alerts-panel-header{
  position:sticky;
  top:0;
  z-index:1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 12px;
  background:inherit;
  border-bottom:1px solid rgba(148,163,184,.18);
}
.alerts-panel-header h3{ margin:0; font-size:1.05rem; }
.alerts-panel-sub{ margin:4px 0 0; color:var(--muted); font-size:.85rem; }
.alerts-panel-close{
  appearance:none;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.06);
  color:var(--text,#e5e7eb);
  width:34px; height:34px; border-radius:999px; cursor:pointer; font-size:16px;
}
.alerts-panel-body{ padding:14px 18px 18px; display:flex; flex-direction:column; gap:10px; }

@media (max-width:640px){
  .alerts-panel-overlay{
    align-items:flex-end;
    padding:0;
    background:rgba(0,0,0,.62);
  }
  .alerts-panel-modal{
    width:100%;
    max-height:85vh;
    border-radius:18px 18px 0 0;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    border-left:0; border-right:0; border-bottom:0;
    box-shadow:0 -10px 40px rgba(0,0,0,.45);
    -webkit-overflow-scrolling:touch;
    padding-bottom:max(10px, env(safe-area-inset-bottom));
  }
  .alerts-panel-handle{
    display:block;
    width:42px;
    height:5px;
    border-radius:999px;
    background:rgba(148,163,184,.45);
    margin:10px auto 2px;
  }
  .alerts-panel-header{ padding:10px 16px 10px; }
  .alerts-panel-body{ padding:10px 16px 18px; }
}


/* Help popup content follows site theme */
.help-inline-popup{
  background: var(--surface, rgba(17,24,39,.98));
  color: var(--text, #e5e7eb);
  border-color: var(--surface-border, rgba(148,163,184,.25));
}
.help-inline-popup .status-help-header{
  background: inherit;
}
.help-inline-popup-body{
  background: transparent;
}
.help-inline-popup-body p,
.help-inline-popup-body li{
  color: var(--text);
  opacity: .94;
}
.help-inline-popup-body .status-help-note{
  color: var(--muted);
}
.help-inline-list{
  margin: 8px 0 0 0;
  padding-left: 18px;
}
.help-inline-list li{
  margin: 7px 0;
  line-height: 1.4;
}
body.light .help-inline-popup-body p,
body.light .help-inline-popup-body li{
  color: var(--text);
  opacity: 1;
}

@media (max-width: 640px){
  .help-inline-popup .status-help-body{
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
}


/* Premium hover / press polish */
.card,
.kpi,
.trip-row,
.planner-item,
.check-item,
.alerts-group-item{
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease, background .18s ease;
}
@media (hover:hover){
  .card:hover,
  .kpi:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(0,0,0,.10);
  }
  .trip-row:hover,
  .planner-item:hover,
  .check-item:hover,
  .alerts-group-item:hover{
    transform: translateY(-1px);
    filter: brightness(1.02);
  }
  .btn:hover,
  .pill-link:hover,
  .tab-btn:hover{
    filter: brightness(1.06);
  }
}
.btn:active,
.pill-link:active,
.tab-btn:active{
  transform: translateY(1px) scale(.99);
}

/* Command Center pro polish */
.command-center-next-step-live{
  position: relative;
  animation: ccNextPulse 2.8s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(56,189,248,.18);
}
.command-center-next-step-live::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(56,189,248,.18), 0 0 24px rgba(56,189,248,.14);
  pointer-events: none;
}
.command-center-due-soon{
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(251,191,36,.25);
  background: rgba(251,191,36,.10);
  font-size: .85rem;
}
.command-center-due-soon.urgent{
  border-color: rgba(248,113,113,.30);
  background: rgba(248,113,113,.10);
}
@keyframes ccNextPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(56,189,248,.08); }
  50%{ box-shadow: 0 0 0 8px rgba(56,189,248,0); }
}

/* Alerts system */
.alerts-group + .alerts-group{
  margin-top: 14px;
}
.alerts-group h4{
  margin: 0 0 10px;
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.alerts-group-item{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 12px;
  border: 1px solid var(--surface-border);
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
}
.alerts-group-item.urgent{
  border-color: rgba(248,113,113,.30);
  background: rgba(248,113,113,.06);
}
.alerts-group-item.planning{
  border-color: rgba(251,191,36,.28);
  background: rgba(251,191,36,.06);
}
.alerts-group-main{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.alerts-group-title{
  font-weight: 700;
}
.alerts-group-sub{
  font-size: .84rem;
  color: var(--muted);
}
.alerts-quick-action{
  min-width: 96px;
}

/* Planner memory hints */
.planner-memory-hint{
  display:none;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--surface-border);
  background: rgba(255,255,255,.03);
  font-size: .82rem;
}
.planner-memory-hint strong{
  display:block;
  margin-bottom: 4px;
}
.planner-memory-hint.similar{
  border-color: rgba(251,191,36,.30);
  background: rgba(251,191,36,.08);
}
.planner-memory-hint.exact{
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.08);
}
.planner-memory-badge{
  display:inline-flex;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .73rem;
  border: 1px solid var(--surface-border);
}
.planner-memory-badge.exact{
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.28);
}
.planner-memory-badge.similar{
  background: rgba(251,191,36,.10);
  border-color: rgba(251,191,36,.28);
}


.command-center-alert.is-clickable{
  cursor: pointer;
  text-align: left;
  width: 100%;
  background: inherit;
}
@media (hover:hover){
  .command-center-alert.is-clickable:hover{
    filter: brightness(1.04);
    transform: translateY(-1px);
  }
}


.command-center-next-step.is-clickable{
  cursor:pointer;
  text-align:left;
  width:100%;
  border:none;
}
.command-center-alert.is-clickable{
  cursor:pointer;
  text-align:left;
  width:100%;
  border:none;
}


/* Guided micro-feedback */
.guided-pulse{
  animation: guidedPulse 1.6s ease-out;
  position: relative;
}
.guided-pulse::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: inherit;
  border: 2px solid rgba(56,189,248,.65);
  box-shadow: 0 0 0 0 rgba(56,189,248,.28), 0 0 20px rgba(56,189,248,.18);
  pointer-events:none;
  animation: guidedPulseRing 1.6s ease-out;
}
@keyframes guidedPulse{
  0%,100%{ box-shadow:none; }
  18%{ box-shadow: 0 0 0 4px rgba(56,189,248,.10); }
}
@keyframes guidedPulseRing{
  0%{ opacity:0; transform:scale(.98); }
  20%{ opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.03); }
}


.command-center-pay-btn{
  margin-left: 8px;
}
@media (max-width: 640px){
  .command-center-pay-btn{
    margin-left: 0;
    margin-top: 8px;
  }
}



/* Alerts panel theme fix */
.alerts-panel-modal{
  background: var(--surface-2, var(--surface, #0f172a)) !important;
  color: var(--text, #e5e7eb) !important;
  border: 1px solid var(--surface-border, rgba(148,163,184,.25)) !important;
}

.alerts-panel-header{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) !important;
  border-bottom: 1px solid var(--surface-border, rgba(148,163,184,.18)) !important;
}

.alerts-panel-header h3,
.alerts-panel-sub{
  color: var(--text, #e5e7eb) !important;
}

.alerts-panel-sub{
  opacity: .82;
}

.alerts-panel-close{
  background: rgba(255,255,255,.06) !important;
  color: var(--text, #e5e7eb) !important;
  border: 1px solid var(--surface-border, rgba(148,163,184,.22)) !important;
}

.alerts-group-item{
  background: var(--surface, rgba(255,255,255,.03)) !important;
  color: var(--text, #e5e7eb) !important;
  border: 1px solid var(--surface-border, rgba(148,163,184,.22)) !important;
}

.alerts-group-item.urgent{
  background: rgba(248,113,113,.10) !important;
  border-color: rgba(248,113,113,.30) !important;
}

.alerts-group-item.planning{
  background: rgba(251,191,36,.10) !important;
  border-color: rgba(251,191,36,.28) !important;
}

.alerts-group-title{
  color: var(--text, #e5e7eb) !important;
}

.alerts-group-sub{
  color: var(--muted, #94a3b8) !important;
}

.alerts-quick-action{
  background: rgba(255,255,255,.08) !important;
  color: var(--text, #e5e7eb) !important;
  border: 1px solid var(--surface-border, rgba(148,163,184,.22)) !important;
}

body.light .alerts-panel-modal{
  background: var(--surface-2, #ffffff) !important;
  color: var(--text, #0f172a) !important;
  border-color: var(--surface-border, rgba(148,163,184,.22)) !important;
}

body.light .alerts-panel-header{
  background: linear-gradient(180deg, rgba(15,23,42,.02), rgba(15,23,42,0)) !important;
}

body.light .alerts-panel-header h3,
body.light .alerts-panel-sub,
body.light .alerts-group-title{
  color: var(--text, #0f172a) !important;
}

body.light .alerts-group-sub{
  color: var(--muted, #475569) !important;
}

body.light .alerts-group-item{
  background: #ffffff !important;
}

body.light .alerts-group-item.urgent{
  background: rgba(248,113,113,.06) !important;
}

body.light .alerts-group-item.planning{
  background: rgba(251,191,36,.06) !important;
}

body.light .alerts-quick-action{
  background: rgba(15,23,42,.04) !important;
  color: var(--text, #0f172a) !important;
}



/* Smart alerts text color fix for dark mode */
.command-center-panel,
.command-center-panel h3,
.command-center-empty,
.command-center-today-item,
.command-center-today-time{
  color: var(--text, #e5e7eb);
}

.command-center-alert{
  color: var(--text, #e5e7eb) !important;
}

.command-center-alert .muted,
.command-center-next-step .muted{
  color: var(--muted, #94a3b8) !important;
}

body.light .command-center-panel,
body.light .command-center-panel h3,
body.light .command-center-empty,
body.light .command-center-today-item,
body.light .command-center-today-time,
body.light .command-center-alert{
  color: var(--text, #0f172a) !important;
}

body.light .command-center-alert .muted,
body.light .command-center-next-step .muted{
  color: var(--muted, #475569) !important;
}



/* Mobile popup sheet hard-fix for Alerts / Trip Status Guide / Help */
@media (max-width: 768px){
  .status-help-overlay,
  .alerts-panel-overlay{
    position: fixed !important;
    inset: 0 !important;
    display: flex;
    align-items: flex-end !important;
    justify-content: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.62) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .status-help-modal,
  .alerts-panel-modal,
  .help-inline-popup{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    max-height: min(86svh, 86vh) !important;
    margin: 0 !important;
    transform: none !important;
    border-radius: 18px 18px 0 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    box-shadow: 0 -12px 40px rgba(0,0,0,.42) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    animation: mobilePopupSheetUp .22s ease-out;
  }

  .status-help-header,
  .alerts-panel-header{
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    padding: 10px 16px !important;
  }

  .status-help-body,
  .alerts-panel-body,
  .help-inline-popup .status-help-body{
    padding: 10px 16px calc(18px + env(safe-area-inset-bottom)) !important;
  }

  .status-help-handle,
  .alerts-panel-handle{
    display: block !important;
    width: 42px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: rgba(148,163,184,.45) !important;
    margin: 10px auto 2px !important;
  }
}

@keyframes mobilePopupSheetUp{
  from{ transform: translateY(16px); opacity:.92; }
  to{ transform: translateY(0); opacity:1; }
}

/* Countdown polish */
.countdown-highlight {
  animation: glowPulse 2.5s ease-in-out infinite;
}
@keyframes glowPulse {
  0% { box-shadow: 0 0 0 rgba(56,189,248,0); }
  50% { box-shadow: 0 0 12px rgba(56,189,248,0.4); }
  100% { box-shadow: 0 0 0 rgba(56,189,248,0); }
}
/* ===== COMMAND CENTER (LEVEL 2) ===== */

.next-up-block {
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 10px;
}

.next-up-title {
  font-weight: 600;
  font-size: 14px;
}

.next-up-date {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 2px;
}

/* Now / Next / Later sections */

.cc-row {
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 10px;
}

.cc-label {
  font-size: 11px;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 4px;
}

.cc-main {
  font-weight: 600;
}

/* Dark mode tweak */
body.light .next-up-block,
body.light .cc-row {
  background: rgba(0,0,0,0.05);
}

/* ===== Cruise Log v2 cleanup ===== */
.cruise-log-v2-shell{
  margin-top:12px;
}
.cruise-log-v2-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  padding:10px 12px;
  border:1px solid var(--surface-border);
  border-radius:14px;
  background: var(--surface);
}
.cruise-log-v2-title{
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.cruise-log-v2-sub{
  color:var(--muted);
  font-size:.76rem;
  margin-top:4px;
}
.cruise-log-v2-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.ports-quick-filter{
  display:inline-flex;
  gap:6px;
  padding:4px;
  border-radius:999px;
  border:1px solid var(--surface-border);
  background:var(--surface);
}
.ports-filter-btn{
  border:none;
  background:transparent;
  color:var(--muted);
  padding:6px 10px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  cursor:pointer;
  transition:all .18s ease;
}
.ports-filter-btn.is-active{
  background:linear-gradient(90deg,#38bdf8,#0878bd);
  color:#fff;
  box-shadow:0 0 18px rgba(56,189,248,.28);
}
.ports-explorer-list{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform:translateY(-6px);
  transition:max-height .3s ease, opacity .24s ease, transform .24s ease;
  will-change:max-height, opacity, transform;
}
.ports-explorer-list.is-open{
  opacity:1;
  transform:translateY(0);
}
.ports-explorer-list.is-collapsed{
  max-height:0 !important;
  opacity:0;
  transform:translateY(-6px);
}
.port-stat-head--compact{
  gap:6px;
}
.port-stat-name-line{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.port-favorite-btn{
  margin-left:auto;
  appearance:none;
  border:1px solid rgba(130,145,170,.28);
  background:rgba(255,255,255,.72);
  color:var(--text);
  border-radius:999px;
  padding:4px 10px;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.port-favorite-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(27,44,79,.10);
}
.port-favorite-btn.is-favorite{
  border-color:rgba(255,196,0,.45);
  background:rgba(255,244,200,.78);
  color:#8a6400;
}
.port-stat-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.port-mini-pill{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--surface-border);
  background:var(--surface);
  color:var(--muted);
  font-size:.68rem;
  white-space:nowrap;
}
.port-stat-row{
  margin-bottom:8px;
}
.port-stat-summary{
  padding:10px 12px;
}
.port-stat-name{
  font-size:.95rem;
  line-height:1.15;
}
.port-stat-sub-main{
  font-size:.78rem;
}
.port-stat-timeline--compact{
  font-size:.72rem;
  line-height:1.3;
  color:var(--muted);
}
.port-journal-grid{
  gap:8px;
}
.port-journal-card{
  padding:10px;
}
.port-trip-item{
  padding:8px 0;
}
@media (max-width:700px){
  .cruise-log-v2-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .cruise-log-v2-actions{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }
  .ports-quick-filter{
    width:100%;
    justify-content:space-between;
  }
  .ports-filter-btn{
    flex:1 1 0;
  }
  .cruise-log-v2-toggle{
    width:100%;
  }
  .port-stat-summary{
    padding:9px 10px;
  }
  .port-stat-name{
    font-size:.9rem;
  }
  .port-mini-pill{
    font-size:.64rem;
    padding:2px 7px;
  }
}


/* Cruise Log v2 polish */
#ports-map{
  opacity:.68;
  transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease, box-shadow .35s ease;
}
#ports-map.is-visible{
  opacity:1;
  transform:translateY(0);
}
.ports-top5-bar-fill,
.ships-year-bar-fill,
.ship-bar-fill{
  transform-origin:left center;
}
.ports-top5-bar-fill.is-animated,
.ships-year-bar-fill.is-animated,
.ship-bar-fill.is-animated{
  animation:cruiseLogBarGrow .75s ease both;
}
@keyframes cruiseLogBarGrow{
  from{ transform:scaleX(.08); opacity:.35; }
  to{ transform:scaleX(1); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .ports-explorer-list,
  #ports-map,
  .ports-top5-bar-fill,
  .ships-year-bar-fill,
  .ship-bar-fill{ transition:none !important; animation:none !important; }
}


/* ===== Port Trips Modal ===== */
.port-trips-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(2,6,23,.58);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(6px);
}
.port-trips-modal{
  width: min(760px, 96vw);
  max-height: 86vh;
  overflow: auto;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  padding: 16px;
}
.port-trips-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.port-trips-modal-kicker{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:4px;
}
.port-trips-modal-header h3{
  margin:0;
  font-size:1.25rem;
}
.port-trips-modal-body{
  display:grid;
  gap:10px;
}
.port-trip-mini-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  border:1px solid var(--surface-border);
  background: var(--row-bg);
  border-radius:16px;
  padding:12px 14px;
}
.port-trip-mini-title{
  font-weight:800;
  font-size:.98rem;
  margin-bottom:4px;
}
.port-trip-mini-meta{
  font-size:.83rem;
  color:var(--muted);
}
.port-trip-mini-sub{
  margin-top:4px;
  font-size:.76rem;
  color:var(--muted);
}
.port-trip-mini-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.port-trip-mini-route{
  margin-top:10px;
  position:relative;
}
.route-preview-wrap{
  position:relative;
}
.route-preview-wrap::after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:36px;
  height:100%;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92));
  border-radius:0 16px 16px 0;
}
body.light .route-preview-wrap::after{
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.96));
}
body:not(.light) .route-preview-wrap::after{
  background:linear-gradient(90deg, rgba(15,23,42,0), rgba(15,23,42,.96));
}
.route-preview-scroll{
  padding:8px 10px;
  border:1px solid var(--surface-border);
  border-radius:16px;
  background: rgba(255,255,255,0.04);
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  scrollbar-width:thin;
}
body.light .route-preview-scroll{
  background: rgba(15,23,42,0.04);
}
.route-preview-track{
  display:inline-flex;
  align-items:center;
  gap:0;
  min-width:max-content;
}
.port-trip-mini-route .route-stop{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid var(--surface-border);
  background: var(--card-bg);
  font-weight:700;
  color:var(--text);
  font-size:.9rem;
  line-height:1;
}
.port-trip-mini-route .route-stop-label{
  max-width:110px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.port-trip-mini-route .route-stop-home{
  box-shadow: inset 0 0 0 1px rgba(56,189,248,.18);
}
.port-trip-mini-route .route-stop-sea{
  background: rgba(56,189,248,0.10);
  padding:7px 10px;
}
.port-trip-mini-route .route-stop-selected{
  border-color: rgba(56,189,248,.75);
  box-shadow: 0 0 0 2px rgba(56,189,248,.18);
  background: linear-gradient(135deg, rgba(56,189,248,.14), rgba(8,120,189,.10));
}
.port-trip-mini-route .route-arrow{
  display:inline-block;
  margin:0 8px;
  color:var(--muted);
  font-weight:800;
}
@media (max-width:640px){
  .port-trip-mini-card{
    grid-template-columns:1fr;
  }
  .port-trip-mini-actions{
    justify-content:flex-start;
  }
}


/* ===== Mobile UI v2 for Port Trips Modal ===== */
@media (max-width: 640px){
  .port-trips-modal-overlay{
    align-items: flex-end;
    padding: 0;
    background: rgba(2,6,23,.66);
    backdrop-filter: blur(10px);
  }

  .port-trips-modal{
    width: 100%;
    max-width: none;
    max-height: 82vh;
    border-radius: 22px 22px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 14px 14px 16px;
    box-shadow: 0 -18px 42px rgba(0,0,0,.38);
    animation: portTripsSheetIn .24s ease-out;
  }

  .port-trips-modal::before{
    content:'';
    display:block;
    width:44px;
    height:5px;
    border-radius:999px;
    background: rgba(148,163,184,.55);
    margin: 0 auto 12px;
  }

  .port-trips-modal-header{
    align-items:flex-start;
    gap:10px;
    margin-bottom:10px;
  }

  .port-trips-modal-kicker{
    font-size:.70rem;
    letter-spacing:.16em;
    margin-bottom:6px;
  }

  .port-trips-modal-header h3{
    font-size:1rem;
    line-height:1.15;
    max-width: 78%;
  }

  .port-trips-modal-header .btn{
    padding:8px 12px;
    font-size:.82rem;
    min-height:40px;
  }

  .port-trips-modal-body{
    gap:9px;
  }

  .port-trip-mini-card{
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 11px 11px 12px;
    border-radius: 15px;
  }

  .port-trip-mini-title{
    font-size: .92rem;
    line-height: 1.18;
    margin-bottom: 3px;
  }

  .port-trip-mini-meta{
    font-size: .78rem;
    line-height: 1.25;
  }

  .port-trip-mini-sub{
    margin-top: 3px;
    font-size: .72rem;
  }

  .port-trip-mini-route{
    margin-top: 8px;
  }

  .route-preview-wrap::after{
    width: 26px;
  }

  .route-preview-scroll{
    padding: 6px 8px;
    border-radius: 14px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .port-trip-mini-route .route-stop{
    padding: 7px 10px;
    gap: 4px;
    font-size: .82rem;
    scroll-snap-align: start;
  }

  .port-trip-mini-route .route-stop-label{
    max-width: 88px;
  }

  .port-trip-mini-route .route-stop-sea{
    padding: 7px 9px;
  }

  .port-trip-mini-route .route-arrow{
    margin: 0 6px;
    font-size: .95rem;
  }

  .port-trip-mini-actions{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:8px;
    margin-top: 2px;
    justify-content:stretch;
  }

  .port-trip-mini-actions .btn{
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    font-size: .86rem;
  }
}

@keyframes portTripsSheetIn{
  from{
    transform: translateY(24px);
    opacity: 0;
  }
  to{
    transform: translateY(0);
    opacity: 1;
  }
}



/* ===== Desktop fix: keep trip modal actions visible ===== */
.port-trip-mini-main{
  min-width: 0;
}

@media (min-width: 768px){
  .port-trips-modal{
    width: min(880px, 92vw);
  }

  .port-trip-mini-card{
    grid-template-columns: minmax(0, 1fr) 148px;
    align-items: start;
  }

  .port-trip-mini-main{
    min-width: 0;
  }

  .port-trip-mini-route{
    min-width: 0;
  }

  .route-preview-wrap{
    min-width: 0;
  }

  .route-preview-scroll{
    max-width: 100%;
  }

  .port-trip-mini-actions{
    width: 148px;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
    align-self: center;
  }

  .port-trip-mini-actions .btn{
    width: 100%;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
  }
}



/* ===== PORT DETAIL MODAL V2 ===== */
.port-trips-modal-v2{
  width:min(880px, 96vw);
}
.port-trips-modal-header-v2{
  align-items:flex-start;
  margin-bottom:14px;
}
.port-detail-hero h3{
  margin:0 0 4px;
  font-size:1.35rem;
}
.port-detail-meta{
  color:var(--muted);
  font-size:.9rem;
}
.port-detail-summary-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
.port-detail-stat{
  border:1px solid var(--surface-border);
  background:var(--row-bg);
  border-radius:16px;
  padding:12px 14px;
  min-width:0;
}
.port-detail-stat-label{
  display:block;
  color:var(--muted);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:6px;
}
.port-detail-stat strong{
  display:block;
  font-size:.96rem;
  line-height:1.25;
  word-break:break-word;
}
.port-detail-section{
  margin-top:14px;
}
.port-detail-section-title{
  font-size:.78rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:8px;
}
.port-detail-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.port-detail-ship-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid var(--surface-border);
  background:var(--surface);
  color:var(--text);
  font-size:.82rem;
  font-weight:600;
}
.port-detail-empty{
  color:var(--muted);
  font-size:.84rem;
}
@media (max-width: 767px){
  .port-trips-modal-v2{
    width:100%;
  }
  .port-detail-summary-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .port-detail-hero h3{
    font-size:1.15rem;
  }
  .port-detail-meta{
    font-size:.84rem;
  }
}

/* ===== Port Memory + Playback + Polish v1 ===== */
.port-memory-section{
  border:1px solid var(--surface-border);
  background: linear-gradient(135deg, rgba(56,189,248,.10), rgba(8,120,189,.08));
}
.port-memory-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.port-memory-field{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.port-memory-field-note{ margin-top:12px; }
.port-memory-label{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.port-memory-input,
.port-memory-textarea{ width:100%; }
.port-memory-textarea{ min-height:82px; resize:vertical; }
.port-memory-footer{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.port-memory-status{ font-size:.74rem; color:var(--muted); }
.port-trip-mini-card,
.port-detail-stat,
.port-detail-ship-chip,
.route-stop,
.route-stop-label,
.route-preview-wrap{
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, background-color .18s ease, border-color .18s ease;
}
@media (hover:hover){
  .port-trip-mini-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(15,23,42,.18);
  }
  .port-detail-ship-chip:hover,
  .route-stop:hover{ transform: translateY(-1px) scale(1.03); }
}
.route-stop-live{
  box-shadow: 0 0 0 1px rgba(56,189,248,.45), 0 0 16px rgba(56,189,248,.28);
  transform: scale(1.05);
}
.tt-enter-card{
  opacity:0;
  transform: translateY(8px);
  animation: ttPortCardIn .35s ease forwards;
  animation-delay: var(--tt-enter-delay, 0ms);
}
@keyframes ttPortCardIn{ to{ opacity:1; transform:none; } }
.ports-playback-controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--surface-border);
}
.ports-playback-day{
  font-size:.8rem;
  color:var(--muted);
  margin-left:auto;
}
.route-preview-track{ scroll-behavior:smooth; }
#ports-map.is-visible{ animation: portsMapFadeIn .28s ease; }
@keyframes portsMapFadeIn{
  from{ opacity:.6; transform: translateY(3px); }
  to{ opacity:1; transform:none; }
}
@media (max-width:640px){
  .port-memory-grid{ grid-template-columns:1fr; }
  .ports-playback-controls{ align-items:stretch; }
  .ports-playback-controls .btn{ flex:1 1 calc(50% - 4px); }
  .ports-playback-day{ width:100%; margin-left:0; }
}


/* ===== Port Explorer memory status + insights ===== */
.ports-memory-insights{
  margin-top: 10px;
}
.ports-memory-insights-title{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: 8px;
}
.ports-memory-insights-list{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ports-memory-insight-card{
  min-width: 180px;
  max-width: 260px;
  flex: 1 1 180px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--surface-border);
  background: linear-gradient(135deg, rgba(56,189,248,.10), rgba(8,120,189,.08));
  box-shadow: 0 6px 20px rgba(2,6,23,.10);
}
.ports-memory-insight-name{
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
}
.ports-memory-insight-meta{
  font-size: .74rem;
  color: var(--muted);
  margin-bottom: 6px;
}
.ports-memory-insight-fav{
  font-size: .78rem;
  color: var(--text);
  line-height: 1.35;
}
.port-trip-actions-wrap{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.port-trip-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.port-trip-actions .btn{
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
@media (hover:hover){
  .port-trip-actions .btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(2,6,23,.18);
  }
}
.port-trip-memory-status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--surface-border);
  background: var(--surface);
  font-size: .72rem;
  font-weight: 700;
  width: fit-content;
  color: var(--muted);
}
.port-trip-memory-status.is-saved{
  border-color: rgba(34,197,94,.40);
  background: rgba(34,197,94,.12);
  color: var(--text);
}
.port-trip-memory-status.is-empty{
  border-color: rgba(148,163,184,.35);
  background: rgba(148,163,184,.08);
  color: var(--muted);
}
.port-trip-memory-btn.is-has-memory{
  border-color: rgba(34,197,94,.28);
  box-shadow: 0 0 0 1px rgba(34,197,94,.10) inset;
}
.port-trip-memory-btn.is-empty-memory{
  border-style: dashed;
}
.port-trip-memory.pulse-highlight{
  outline: 2px solid rgba(56,189,248,.42);
  box-shadow: 0 0 0 6px rgba(56,189,248,.10);
}
@media (max-width: 680px){
  .ports-memory-insights-list{
    display: grid;
    grid-template-columns: 1fr;
  }
  .port-trip-actions{
    flex-direction: column;
  }
  .port-trip-actions .btn{
    width: 100%;
    justify-content: center;
  }
}


/* Memory insights are clickable */
.ports-memory-insight-card{
  appearance:none;
  -webkit-appearance:none;
  background:var(--card-bg, #fff);
  border:1px solid var(--line, rgba(148,163,184,.25));
  border-radius:18px;
  padding:14px 16px;
  text-align:left;
  width:100%;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ports-memory-insight-card:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(2,6,23,.10);
  border-color:rgba(56,189,248,.45);
}
.ports-memory-insight-card:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(56,189,248,.30), 0 10px 24px rgba(2,6,23,.10);
}
.pulse-highlight{
  animation:portMemoryPulse 1.25s ease;
}
@keyframes portMemoryPulse{
  0%{ box-shadow:0 0 0 0 rgba(56,189,248,.0); }
  20%{ box-shadow:0 0 0 4px rgba(56,189,248,.22); }
  60%{ box-shadow:0 0 0 10px rgba(56,189,248,.0); }
  100%{ box-shadow:0 0 0 0 rgba(56,189,248,.0); }
}












/* =========================
  GUIDED DEMO
========================== */
.demo-card{
  margin: 10px 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(15,23,42,.9);
  background: linear-gradient(135deg, rgba(15,23,42,.85), rgba(30,41,59,.85));
  color: #fff;
  font-size: .85rem;
  display: block;
  box-shadow: 0 10px 24px rgba(2,6,23,.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.demo-card-head{
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7dd3fc;
  margin-bottom: 4px;
}
.demo-card-body{
  line-height: 1.35;
  color: #e5e7eb;
}
.demo-card-actions{
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.demo-card-actions button + button{
  margin-left: 8px;
}
.demo-card-actions button{
  border: none;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: .78rem;
  cursor: pointer;
  display: inline-block;
  -webkit-appearance: none;
  appearance: none;
}
.demo-card-primary{
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  color: white;
}
.demo-card-secondary{
  background: rgba(255,255,255,.10);
  color: white;
  border: 1px solid rgba(255,255,255,.18);
}

/* Light theme */
body.light .demo-card,
html.light .demo-card,
[data-theme="light"] .demo-card{
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.92);
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(241,245,249,.96));
  color: #0f172a;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
body.light .demo-card-head,
html.light .demo-card-head,
[data-theme="light"] .demo-card-head{
  color: #6366f1;
}
body.light .demo-card-body,
html.light .demo-card-body,
[data-theme="light"] .demo-card-body{
  color: #334155;
}
body.light .demo-card-secondary,
html.light .demo-card-secondary,
[data-theme="light"] .demo-card-secondary{
  background: rgba(15,23,42,.04);
  color: #0f172a;
  border: 1px solid rgba(148,163,184,.35);
}

/* Dark theme explicit */
body.dark .demo-card,
html.dark .demo-card,
[data-theme="dark"] .demo-card{
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(15,23,42,.9);
  background: linear-gradient(135deg, rgba(15,23,42,.85), rgba(30,41,59,.85));
  color: #fff;
}
body.dark .demo-card-head,
html.dark .demo-card-head,
[data-theme="dark"] .demo-card-head{
  color: #7dd3fc;
}
body.dark .demo-card-body,
html.dark .demo-card-body,
[data-theme="dark"] .demo-card-body{
  color: #e5e7eb;
}
body.dark .demo-card-secondary,
html.dark .demo-card-secondary,
[data-theme="dark"] .demo-card-secondary{
  background: rgba(255,255,255,.10);
  color: white;
  border: 1px solid rgba(255,255,255,.18);
}

.demo-pulse{
  animation: demoPulse 1.6s ease;
}
@keyframes demoPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); filter: drop-shadow(0 0 0.4rem rgba(56,189,248,.45)); }
  70%  { transform: scale(1.12); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(56,189,248,0)); }
}
@media (max-width: 640px){
  .demo-card{
    padding: 10px 12px;
    border-radius: 12px;
  }
  .demo-card-actions{
    gap: 6px;
  }
  .demo-card-actions button + button{
    margin-left: 6px;
  }
  .demo-card-actions button{
    padding: 7px 10px;
    font-size: .74rem;
  }
}



/* Memory status variants */
.port-trip-memory-status.is-yes{
  background: rgba(34,197,94,.10);
  color: #15803d;
  border-color: rgba(34,197,94,.28);
}
.port-trip-memory-status.is-maybe{
  background: rgba(245,158,11,.10);
  color: #b45309;
  border-color: rgba(245,158,11,.28);
}
.port-trip-memory-status.is-no{
  background: rgba(239,68,68,.10);
  color: #b91c1c;
  border-color: rgba(239,68,68,.28);
}
body.dark .port-trip-memory-status.is-yes,
html.dark .port-trip-memory-status.is-yes,
[data-theme="dark"] .port-trip-memory-status.is-yes{
  background: rgba(34,197,94,.18);
  color: #bbf7d0;
  border-color: rgba(34,197,94,.32);
}
body.dark .port-trip-memory-status.is-maybe,
html.dark .port-trip-memory-status.is-maybe,
[data-theme="dark"] .port-trip-memory-status.is-maybe{
  background: rgba(245,158,11,.18);
  color: #fde68a;
  border-color: rgba(245,158,11,.32);
}
body.dark .port-trip-memory-status.is-no,
html.dark .port-trip-memory-status.is-no,
[data-theme="dark"] .port-trip-memory-status.is-no{
  background: rgba(239,68,68,.18);
  color: #fecaca;
  border-color: rgba(239,68,68,.32);
}


.demo-card-featured{
  background: rgba(56,189,248,.12);
  border: 1px solid rgba(56,189,248,.28);
}
body.light .demo-card-featured,
html.light .demo-card-featured,
[data-theme="light"] .demo-card-featured{
  background: rgba(56,189,248,.08);
  border-color: rgba(56,189,248,.24);
  color: #0f172a;
}



/* Don’t rebook / memory warning */
.planner-memory-warning{
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: .75rem;
  border: 1px solid;
}
.planner-memory-warning.yes{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.28);
  color: #15803d;
}
.planner-memory-warning.maybe{
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.28);
  color: #b45309;
}
.planner-memory-warning.no{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.28);
  color: #b91c1c;
}
.planner-memory-warning.saved{
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.24);
  color: #1d4ed8;
}
body.dark .planner-memory-hint.memory-yes,
html.dark .planner-memory-hint.memory-yes,
[data-theme="dark"] .planner-memory-hint.memory-yes,
body.dark .planner-memory-warning.yes,
html.dark .planner-memory-warning.yes,
[data-theme="dark"] .planner-memory-warning.yes{
  background: rgba(34,197,94,.18);
  border-color: rgba(34,197,94,.32);
  color: #bbf7d0;
}
body.dark .planner-memory-hint.memory-maybe,
html.dark .planner-memory-hint.memory-maybe,
[data-theme="dark"] .planner-memory-hint.memory-maybe,
body.dark .planner-memory-warning.maybe,
html.dark .planner-memory-warning.maybe,
[data-theme="dark"] .planner-memory-warning.maybe{
  background: rgba(245,158,11,.18);
  border-color: rgba(245,158,11,.32);
  color: #fde68a;
}
body.dark .planner-memory-hint.memory-no,
html.dark .planner-memory-hint.memory-no,
[data-theme="dark"] .planner-memory-hint.memory-no,
body.dark .planner-memory-warning.no,
html.dark .planner-memory-warning.no,
[data-theme="dark"] .planner-memory-warning.no{
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.32);
  color: #fecaca;
}
body.dark .planner-memory-hint.memory-saved,
html.dark .planner-memory-hint.memory-saved,
[data-theme="dark"] .planner-memory-hint.memory-saved,
body.dark .planner-memory-warning.saved,
html.dark .planner-memory-warning.saved,
[data-theme="dark"] .planner-memory-warning.saved{
  background: rgba(59,130,246,.18);
  border-color: rgba(59,130,246,.32);
  color: #bfdbfe;
}



/* Alerts tab: excursion warnings */
.check-section{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:14px;
}
.check-section-title{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:2px;
}
.check-meta{
  font-size:.8rem;
  color:var(--muted);
  margin-top:2px;
}
.check-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.check-item-warning{
  align-items:flex-start;
}
.check-item-warning.warning-no{
  border-left:4px solid rgba(239,68,68,.7);
}
.check-item-warning.warning-maybe{
  border-left:4px solid rgba(245,158,11,.7);
}
.check-item-warning.warning-yes{
  border-left:4px solid rgba(34,197,94,.7);
}
.check-item-warning.warning-saved{
  border-left:4px solid rgba(59,130,246,.7);
}
@media (max-width: 700px){
  .check-item-warning{
    flex-direction:column;
  }
  .check-actions{
    width:100%;
  }
}

.port-exc-item .planner-memory-warning{
  display:inline-block;
  margin-top:6px;
}



/* Next-level warnings UI */
.port-stat-name-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.port-warning-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.3);
  background:rgba(255,255,255,.72);
  font-size:.68rem;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}
.port-warning-badge.no{
  background:rgba(239,68,68,.10);
  color:#b91c1c;
  border-color:rgba(239,68,68,.25);
}
.port-warning-badge.maybe{
  background:rgba(245,158,11,.10);
  color:#b45309;
  border-color:rgba(245,158,11,.25);
}
.port-warning-badge.yes{
  background:rgba(34,197,94,.10);
  color:#15803d;
  border-color:rgba(34,197,94,.25);
}
.port-warning-badge.saved{
  background:rgba(59,130,246,.10);
  color:#1d4ed8;
  border-color:rgba(59,130,246,.25);
}
.check-warning-group{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  border:1px solid var(--surface-border);
  border-radius:14px;
  background:var(--surface);
}
.check-warning-group-head{
  display:flex;
  flex-direction:column;
  gap:2px;
}
body.dark .port-warning-badge,
html.dark .port-warning-badge,
[data-theme="dark"] .port-warning-badge{
  background:rgba(15,23,42,.7);
  color:#e5e7eb;
  border-color:rgba(148,163,184,.28);
}
body.dark .port-warning-badge.no,
html.dark .port-warning-badge.no,
[data-theme="dark"] .port-warning-badge.no{ color:#fecaca; background:rgba(239,68,68,.16); }
body.dark .port-warning-badge.maybe,
html.dark .port-warning-badge.maybe,
[data-theme="dark"] .port-warning-badge.maybe{ color:#fde68a; background:rgba(245,158,11,.16); }
body.dark .port-warning-badge.yes,
html.dark .port-warning-badge.yes,
[data-theme="dark"] .port-warning-badge.yes{ color:#bbf7d0; background:rgba(34,197,94,.16); }
body.dark .port-warning-badge.saved,
html.dark .port-warning-badge.saved,
[data-theme="dark"] .port-warning-badge.saved{ color:#bfdbfe; background:rgba(59,130,246,.16); }



.port-warning-badge{
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.port-warning-badge:hover{
  transform: translateY(-1px);
}


/* Booking advisory modal */
.trip-advisor-backdrop{
  z-index: 10050;
}
.trip-advisor-modal{
  max-width: 520px;
  width: min(92vw, 520px);
}
.trip-advisor-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}
.trip-advisor-kicker{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.trip-advisor-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.trip-advisor-subject{
  font-size:1.05rem;
  font-weight:800;
  line-height:1.2;
}
.trip-advisor-meta{
  color:var(--muted);
  font-size:.86rem;
}
.trip-advisor-message{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(245,158,11,.10);
  border:1px solid rgba(245,158,11,.22);
  color:inherit;
  font-weight:700;
}
.trip-advisor-note{
  padding:10px 12px;
  border-radius:12px;
  background:var(--surface);
  border:1px solid var(--surface-border);
  color:var(--muted);
  font-size:.84rem;
}
.trip-advisor-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:14px;
  flex-wrap:wrap;
}
body.dark .trip-advisor-message,
html.dark .trip-advisor-message,
[data-theme="dark"] .trip-advisor-message{
  background:rgba(245,158,11,.16);
  border-color:rgba(245,158,11,.28);
}
@media (max-width:640px){
  .trip-advisor-modal{
    width:min(96vw, 520px);
  }
  .trip-advisor-actions{
    flex-direction:column-reverse;
  }
  .trip-advisor-actions .btn{
    width:100%;
  }
}


.trip-advisor-message.trip-advisor-severity-danger{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.22);
}
.trip-advisor-message.trip-advisor-severity-warn{
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.22);
}
.trip-advisor-message.trip-advisor-severity-ok{
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.22);
}
body.dark .trip-advisor-message.trip-advisor-severity-danger,
html.dark .trip-advisor-message.trip-advisor-severity-danger,
[data-theme="dark"] .trip-advisor-message.trip-advisor-severity-danger{
  background: rgba(239,68,68,.16);
  border-color: rgba(239,68,68,.28);
}
body.dark .trip-advisor-message.trip-advisor-severity-warn,
html.dark .trip-advisor-message.trip-advisor-severity-warn,
[data-theme="dark"] .trip-advisor-message.trip-advisor-severity-warn{
  background: rgba(245,158,11,.16);
  border-color: rgba(245,158,11,.28);
}
body.dark .trip-advisor-message.trip-advisor-severity-ok,
html.dark .trip-advisor-message.trip-advisor-severity-ok,
[data-theme="dark"] .trip-advisor-message.trip-advisor-severity-ok{
  background: rgba(34,197,94,.16);
  border-color: rgba(34,197,94,.28);
}


/* Install app button + modal */
#install-app-btn{
  white-space: nowrap;
}
.install-help-backdrop{
  z-index: 10060;
}
.install-help-modal{
  max-width: 520px;
  width: min(92vw, 520px);
}
.install-help-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}
.install-help-kicker{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.install-help-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.install-help-message{
  font-weight:700;
}
.install-help-steps{
  margin:0;
  padding-left:1.15rem;
  color:inherit;
}
.install-help-steps li + li{
  margin-top:6px;
}
.install-help-note{
  padding:10px 12px;
  border-radius:12px;
  background:var(--surface);
  border:1px solid var(--surface-border);
  color:var(--muted);
  font-size:.84rem;
}
.install-help-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:14px;
  flex-wrap:wrap;
}
@media (max-width:640px){
  .install-help-modal{
    width:min(96vw, 520px);
  }
  .install-help-actions{
    flex-direction:column-reverse;
  }
  .install-help-actions .btn{
    width:100%;
  }
}



/* Alerts modal header/body overlap fix */
.alerts-panel-modal{
  display:flex;
  flex-direction:column;
}
.alerts-panel-header{
  position:sticky;
  top:0;
  z-index:2;
  background:inherit;
  flex:0 0 auto;
}
.alerts-panel-body{
  flex:1 1 auto;
  min-height:0;
  padding-top:14px;
}
.alerts-panel-body .alerts-group:first-child{
  margin-top:0;
}
.alerts-panel-body h4{
  margin-top:0;
}
@media (max-width:700px){
  .alerts-panel-header{
    padding-bottom:14px;
  }
  .alerts-panel-body{
    padding-top:16px;
  }
}



/* Alerts modal fixed header + independent body scroll */
.alerts-panel-modal{
  display:flex;
  flex-direction:column;
  overflow:hidden !important;
}
.alerts-panel-header{
  position:relative !important;
  top:auto !important;
  z-index:3;
  flex:0 0 auto;
  background:var(--surface, rgba(17,24,39,.98)) !important;
}
.alerts-panel-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding-top:14px;
}
.alerts-panel-handle{
  flex:0 0 auto;
}
@media (max-width:700px){
  .alerts-panel-modal{
    max-height:85vh;
  }
  .alerts-panel-body{
    padding-top:14px;
  }
}



/* Inline Memory Card (Excursion Edit) */
.inline-memory-card{
  margin-top:10px;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.25);
  background:rgba(59,130,246,.06);
}
.inline-memory-title{
  font-weight:700;
  font-size:.9rem;
}
.inline-memory-sub{
  font-size:.8rem;
  color:var(--muted);
  margin-top:2px;
}
.inline-memory-actions{
  margin-top:8px;
}
.inline-memory-btn{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.3);
  background:rgba(255,255,255,.08);
  cursor:pointer;
  font-size:.8rem;
}
body.dark .inline-memory-card,
html.dark .inline-memory-card,
[data-theme="dark"] .inline-memory-card{
  background:rgba(59,130,246,.10);
}



/* Alive command center + memory timeline + subtle motion */
.command-center-live-item{
  animation: ccFadeSlideIn .35s ease both;
}
.command-center-live-item:nth-child(2){ animation-delay:.04s; }
.command-center-live-item:nth-child(3){ animation-delay:.08s; }

.command-center-animate-in{
  animation: ccCardLift .28s ease;
}
.command-center-alert,
.planner-memory-warning,
.planner-memory-badge{
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.command-center-alert:hover,
.planner-memory-warning:hover,
.planner-memory-badge:hover{
  transform: translateY(-1px);
}

.port-memory-timeline-card{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(99,102,241,.04);
}
.port-memory-timeline-card.compact{
  margin-top:10px;
}
.port-memory-timeline-label{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
.port-memory-timeline-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.port-memory-timeline-item{
  display:grid;
  grid-template-columns: 54px 24px 1fr;
  gap:8px;
  align-items:start;
  animation: ccFadeSlideIn .3s ease both;
}
.port-memory-timeline-year{
  font-weight:800;
  color:var(--muted);
}
.port-memory-timeline-dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.port-memory-timeline-text{
  line-height:1.3;
}
@keyframes ccFadeSlideIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes ccCardLift{
  from{ opacity:.96; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}



/* Excursion inline actions */
.exc-inline-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  flex-wrap:wrap;
}
.exc-memory-btn{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(148,163,184,.32);
  background:rgba(255,255,255,.72);
  color:inherit;
  border-radius:999px;
  padding:6px 10px;
  font-size:.82rem;
  line-height:1;
  cursor:pointer;
}
.exc-memory-btn:hover{
  transform:translateY(-1px);
}
body.dark .exc-memory-btn,
html.dark .exc-memory-btn,
[data-theme="dark"] .exc-memory-btn{
  background:rgba(15,23,42,.65);
}



/* Multi-memory system */
.port-trip-memory-sub{
  margin:2px 0 10px;
  font-size:.82rem;
  color:var(--muted);
}
.port-memory-entries{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.port-memory-entry-card{
  border:1px solid rgba(148,163,184,.22);
  border-radius:14px;
  padding:10px;
  background:rgba(255,255,255,.35);
}
.port-memory-entry-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.port-memory-entry-title{
  font-weight:700;
}
.port-memory-footer-actions{
  display:flex;
  gap:8px;
  align-items:center;
}
body.dark .port-memory-entry-card,
html.dark .port-memory-entry-card,
[data-theme="dark"] .port-memory-entry-card{
  background:rgba(15,23,42,.35);
}



/* Excursion smart badges */
.exc-smart-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.24);
  font-size:.77rem;
  font-weight:700;
  line-height:1.1;
  width:max-content;
  max-width:100%;
}
.exc-smart-badge.yes{
  background:rgba(34,197,94,.10);
  border-color:rgba(34,197,94,.22);
  color:#15803d;
}
.exc-smart-badge.no{
  background:rgba(239,68,68,.10);
  border-color:rgba(239,68,68,.22);
  color:#b91c1c;
}
.exc-smart-badge.maybe{
  background:rgba(245,158,11,.10);
  border-color:rgba(245,158,11,.22);
  color:#b45309;
}
.exc-smart-badge.saved{
  background:rgba(59,130,246,.10);
  border-color:rgba(59,130,246,.22);
  color:#1d4ed8;
}
body.dark .exc-smart-badge.yes,
html.dark .exc-smart-badge.yes,
[data-theme="dark"] .exc-smart-badge.yes{
  color:#bbf7d0;
  background:rgba(34,197,94,.16);
}
body.dark .exc-smart-badge.no,
html.dark .exc-smart-badge.no,
[data-theme="dark"] .exc-smart-badge.no{
  color:#fecaca;
  background:rgba(239,68,68,.16);
}
body.dark .exc-smart-badge.maybe,
html.dark .exc-smart-badge.maybe,
[data-theme="dark"] .exc-smart-badge.maybe{
  color:#fde68a;
  background:rgba(245,158,11,.16);
}
body.dark .exc-smart-badge.saved,
html.dark .exc-smart-badge.saved,
[data-theme="dark"] .exc-smart-badge.saved{
  color:#bfdbfe;
  background:rgba(59,130,246,.16);
}

.exc-smart-badge{
  animation: fadeInUp .35s ease both;
}
.exc-smart-badge.no{
  animation: fadeInUp .35s ease both, pulseWarn 1.2s ease 1;
}
@keyframes fadeInUp{
  from{opacity:0; transform:translateY(6px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes pulseWarn{
  0%{box-shadow:0 0 0 0 rgba(239,68,68,.4);}
  70%{box-shadow:0 0 0 8px rgba(239,68,68,0);}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}
}

.exc-smart-badge{
  font-weight:800;
  letter-spacing:.2px;
}
.exc-smart-badge.yes{ background:rgba(34,197,94,.18); }
.exc-smart-badge.no{ background:rgba(239,68,68,.18); }
.exc-smart-badge.maybe{ background:rgba(245,158,11,.18); }

.leaflet-popup-content{
  animation:portPop .25s ease;
}
@keyframes portPop{
  from{transform:scale(.96); opacity:.6;}
  to{transform:scale(1); opacity:1;}
}



/* Command Center footer warning */
.command-center-chip.footer-warn{
  margin-right: 8px;
  align-self: center;
}
@media (max-width: 700px){
  .command-center-chip.footer-warn{
    width: 100%;
    justify-content: center;
    margin-right: 0;
    margin-bottom: 6px;
  }
}



/* Smart Alerts header placement */
.command-center-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.command-center-panel-head h3{
  margin:0;
}
.command-center-health.in-panel{
  margin:0;
  flex-shrink:0;
}
.command-center-health.in-panel .command-center-health-help{
  margin-left:6px;
}
@media (max-width: 700px){
  .command-center-panel-head{
    align-items:flex-start;
    flex-direction:column;
  }
}



/* Smart Alerts inline header */
.command-center-panel-head.inline-alerts{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.command-center-panel-head.inline-alerts h3{
  margin:0;
}
.command-center-panel-head.inline-alerts .command-center-health.in-panel{
  margin-left:auto;
}
@media (max-width: 700px){
  .command-center-panel-head.inline-alerts{
    flex-direction:row;
    align-items:center;
  }
  .command-center-panel-head.inline-alerts .command-center-health.in-panel{
    transform:scale(.94);
    transform-origin:right center;
  }
}



/* Command Center port weather */
.command-center-weather-panel{
  min-height: 132px;
}
.command-center-weather-loading{
  color: var(--muted);
  font-size: .95rem;
}
.command-center-weather-main{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:6px;
}
.command-center-weather-temp{
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}
.command-center-weather-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.command-center-weather-label{
  font-weight: 700;
}
.command-center-weather-place{
  color: var(--muted);
  font-size: .92rem;
}
.command-center-weather-context{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:.9;
  margin:2px 0 10px;
}
.command-center-weather-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.command-center-weather-stats div{
  border:1px solid rgba(148,163,184,.20);
  border-radius:12px;
  padding:8px 10px;
  background: rgba(255,255,255,.28);
}
.command-center-weather-stats span{
  display:block;
  color: var(--muted);
  font-size: .78rem;
  margin-bottom: 2px;
}
.command-center-weather-stats strong{
  font-size: 1rem;
}
body.dark .command-center-weather-stats div,
html.dark .command-center-weather-stats div,
[data-theme="dark"] .command-center-weather-stats div{
  background: rgba(15,23,42,.35);
}
@media (max-width: 1400px){
  .command-center-weather-stats{
    grid-template-columns: 1fr 1fr 1fr;
  }
}




/* =========================
  MOBILE STICKY MODAL CONTROLS
========================== */
@media (max-width: 820px){
  /* Edit Trip: keep footer actions visible */
  .trip-modal-body{
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
  .trip-modal-body #trip-form-card .form-footer{
    position: sticky;
    bottom: 0;
    z-index: 7;
    margin-top: 14px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--card-bg);
    border-top: 1px solid rgba(148,163,184,.18);
    box-shadow: 0 -10px 24px rgba(15,23,42,.10);
  }
  .trip-modal-body #trip-form-card .form-footer > div:last-child{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:nowrap;
  }
  .trip-modal-body #trip-form-card .form-footer .btn{
    min-height: 42px;
  }

  /* Port memory / Cruise Log modal: keep close reachable */
  .port-trips-modal{
    padding-top: 0;
    overflow: auto;
  }
  .port-trips-modal-header{
    position: sticky;
    top: 0;
    z-index: 8;
    padding: 14px 16px 12px;
    margin: 0 -16px 12px;
    background: var(--card-bg);
    border-bottom: 1px solid rgba(148,163,184,.18);
    box-shadow: 0 8px 18px rgba(15,23,42,.08);
  }
  .port-trips-modal-header .btn,
  .port-trips-modal-header button{
    flex-shrink: 0;
  }
}

/* A little stronger on very small phones */
@media (max-width: 560px){
  .trip-modal-body #trip-form-card .form-footer{
    padding-left: 10px;
    padding-right: 10px;
  }
  .trip-modal-body #trip-form-card .form-footer > div:first-child{
    display:none; /* hide autosave chips in sticky footer on very small screens */
  }
  .trip-modal-body #trip-form-card .form-footer > div:last-child{
    width:100%;
  }
  .trip-modal-body #trip-form-card .form-footer > div:last-child .btn{
    flex:1 1 0;
    min-width:0;
  }

  .port-trips-modal{
    width: min(100vw - 12px, 760px);
    max-height: 92vh;
  }
}




/* =========================
  MOBILE STICKY MODAL CONTROLS — FIXED
========================== */
@media (max-width: 820px){
  /* Make Edit Trip modal behave like a proper docked sheet */
  #trip-modal-backdrop .modal.trip-modal{
    display:flex;
    flex-direction:column;
    max-height:92vh;
    overflow:hidden;
  }
  #trip-modal-backdrop .trip-modal-top{
    position:sticky;
    top:0;
    z-index:12;
    flex:0 0 auto;
  }
  #trip-modal-backdrop .trip-modal-body{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    padding-bottom:calc(110px + env(safe-area-inset-bottom, 0px));
  }

  /* Dock Save/Cancel cleanly to the modal bottom */
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer{
    position:sticky;
    bottom:0;
    z-index:11;
    margin:16px -2px -2px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background:var(--shell-bg);
    border-top:1px solid rgba(148,163,184,.18);
    box-shadow:0 -8px 18px rgba(15,23,42,.14);
    border-radius:0 0 16px 16px;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer > div:first-child{
    margin-bottom:8px;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer > div:last-child{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:nowrap;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer > div:last-child .btn{
    min-height:42px;
  }

  /* Keep memory close button pinned at top */
  .port-trips-modal{
    overflow:auto;
  }
  .port-trips-modal-header{
    position:sticky;
    top:0;
    z-index:12;
  }
}

@media (max-width: 560px){
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer{
    padding-left:10px;
    padding-right:10px;
  }
  
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer > div:last-child{
    width:100%;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer > div:last-child .btn{
    flex:1 1 0;
    min-width:0;
  }
}




/* =========================
  EDIT TRIP TRUE DOCKED FOOTER
========================== */
.trip-modal-footer-dock{
  display:none;
}

@media (max-width: 820px){
  #trip-modal-backdrop .modal.trip-modal{
    display:flex;
    flex-direction:column;
    max-height:92vh;
    overflow:hidden;
  }
  #trip-modal-backdrop .trip-modal-top{
    position:sticky;
    top:0;
    z-index:12;
    flex:0 0 auto;
  }
  #trip-modal-backdrop .trip-modal-body{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    padding-bottom:18px;
  }

  /* remove the floating sticky footer behavior */
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer{
    position:static !important;
    margin:16px 0 0 !important;
    padding:0 !important;
    background:transparent !important;
    border-top:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
  }
  

  /* real bottom dock */
  #trip-modal-backdrop .trip-modal-footer-dock{
    display:none;
    flex:0 0 auto;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background:var(--shell-bg);
    border-top:1px solid rgba(148,163,184,.18);
    box-shadow:0 -8px 18px rgba(15,23,42,.14);
  }
  #trip-modal-backdrop .trip-modal-footer-dock > div{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:nowrap;
  }
  #trip-modal-backdrop .trip-modal-footer-dock .btn{
    min-height:42px;
  }

  /* keep memory close button pinned at top */
  .port-trips-modal{
    overflow:auto;
  }
  .port-trips-modal-header{
    position:sticky;
    top:0;
    z-index:12;
  }
}

@media (max-width: 560px){
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer > div:first-child{
    display:none;
  }
  #trip-modal-backdrop .trip-modal-footer-dock{
    padding-left:10px;
    padding-right:10px;
  }
  #trip-modal-backdrop .trip-modal-footer-dock > div{
    width:100%;
  }
  
}




/* =========================
  EDIT TRIP MODAL — MOBILE ALERT-SHEET STYLE
========================== */
@media (max-width: 820px){
  /* Backdrop behaves like Alerts / Help sheets */
  #trip-modal-backdrop{
    align-items:flex-end !important;
    justify-content:center !important;
    padding:0 !important;
    background:rgba(0,0,0,.62) !important;
  }

  /* Sheet container */
  #trip-modal-backdrop .modal.trip-modal{
    width:100% !important;
    max-width:none !important;
    max-height:85vh !important;
    margin:0 !important;
    border-radius:18px 18px 0 0 !important;
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;
    box-shadow:0 -10px 40px rgba(0,0,0,.45) !important;
    animation:tripModalSheetUp .22s ease-out;
    overflow:hidden !important;
  }

  /* Header like the alert popup */
  #trip-modal-backdrop .trip-modal-top{
    position:sticky !important;
    top:0 !important;
    z-index:12 !important;
    padding:10px 16px 10px !important;
    background:inherit !important;
    border-bottom:1px solid rgba(148,163,184,.18) !important;
  }
  #trip-modal-backdrop .trip-modal-top::before{
    content:"";
    display:block;
    width:42px;
    height:5px;
    border-radius:999px;
    background:rgba(148,163,184,.45);
    margin:0 auto 10px;
  }
  #trip-modal-backdrop .trip-modal-top h3{
    font-size:1rem !important;
  }

  /* Body scroll area */
  #trip-modal-backdrop .trip-modal-body{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    padding:10px 16px 12px !important;
  }

  /* Hide the old in-form action row entirely on mobile */
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer{
    margin:12px 0 0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer > div{
    display:none !important;
  }

  /* Real bottom dock like an app sheet footer */
  #trip-modal-backdrop .trip-modal-footer-dock{
    display:block !important;
    flex:0 0 auto !important;
    padding:10px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background:inherit !important;
    border-top:1px solid rgba(148,163,184,.18) !important;
    box-shadow:0 -8px 18px rgba(15,23,42,.14) !important;
  }
  #trip-modal-backdrop .trip-modal-footer-dock > div{
    display:flex !important;
    gap:8px !important;
    width:100% !important;
  }
  #trip-modal-backdrop .trip-modal-footer-dock > div .btn{
    flex:1 1 0 !important;
    min-width:0 !important;
    min-height:44px !important;
  }

  /* Keep the moved card visually native */
  #trip-modal-backdrop .trip-modal-body #trip-form-card{
    border:0 !important;
    box-shadow:none !important;
    background:transparent !important;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card .card-header{
    padding-top:0 !important;
  }
}

@media (max-width: 560px){
  #trip-modal-backdrop .trip-modal-body{
    padding:10px 14px 10px !important;
  }
  
}

@keyframes tripModalSheetUp{
  from{
    transform:translateY(20px);
    opacity:.92;
  }
  to{
    transform:translateY(0);
    opacity:1;
  }
}



@media (max-width: 820px){
  #trip-modal-backdrop .trip-modal-footer-dock{
    display:none;
    flex:0 0 auto;
    padding:10px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background:inherit !important;
    border-top:1px solid rgba(148,163,184,.18) !important;
    box-shadow:0 -8px 18px rgba(15,23,42,.14) !important;
  }
  #trip-modal-backdrop .trip-modal-footer-dock > div{
    display:flex !important;
    gap:8px !important;
    width:100% !important;
  }
  #trip-modal-backdrop .trip-modal-footer-dock > div .btn{
    flex:1 1 0 !important;
    min-width:0 !important;
    min-height:44px !important;
  }

  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer{
    margin:12px 0 0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer > div:first-child{
    display:flex !important;
    flex-wrap:wrap;
    gap:6px !important;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer > div:last-child{
    display:none !important;
  }
}
@media (max-width: 560px){
  #trip-modal-backdrop .trip-modal-footer-dock{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  #trip-modal-backdrop .trip-modal-footer-dock > div .btn{
    flex:1 1 0;
    min-width:0;
  }
}



/* Dock polish */
.trip-modal-footer-dock{
  box-shadow: 0 -6px 20px rgba(0,0,0,.25), 0 -1px 0 rgba(255,255,255,.04) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 820px){
  #trip-modal-backdrop .trip-modal-body{
    padding-bottom: 120px !important;
  }
}

/* Micro animations */
.command-center-panel,
.command-center-next-step,
.command-center-alert,
.exc-smart-badge{
  animation: ttFadeSlideIn .28s ease both;
}
.exc-smart-badge.no{
  animation: ttFadeSlideIn .28s ease both, ttWarnPulse 1.4s ease 1;
}
@keyframes ttFadeSlideIn{
  from{opacity:0; transform:translateY(4px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes ttWarnPulse{
  0%{ box-shadow: 0 0 0 0 rgba(239,68,68,.34); }
  70%{ box-shadow: 0 0 0 8px rgba(239,68,68,0); }
  100%{ box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
.command-center-weather-panel{
  animation: ttFadeSlideIn .32s ease both;
}
.command-center-weather-icon{
  font-size: 1.55rem;
  line-height: 1;
}



/* Command Center layout priority swap */
.command-center-insight-grid.command-center-insight-grid-priority{
  display:grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
  grid-template-areas:
    "primary support"
    "weather weather";
  gap:12px;
  align-items:stretch;
}
.command-center-insight-grid.command-center-insight-grid-priority .command-center-primary-panel{
  grid-area: primary;
  order:1;
}
.command-center-insight-grid.command-center-insight-grid-priority .command-center-support-panel{
  grid-area: support;
  order:2;
}
.command-center-insight-grid.command-center-insight-grid-priority .command-center-weather-panel{
  grid-area: weather;
  grid-column:1 / -1;
  grid-row:auto;
  align-self:stretch;
}

/* Hide Smart Alerts when there are no actionable items */
.command-center-insight-grid.command-center-insight-grid-priority.command-center-no-support{
  grid-template-columns: 1fr;
  grid-template-areas:
    "primary"
    "weather";
}
.command-center-insight-grid.command-center-insight-grid-priority.command-center-no-support .command-center-primary-panel{
  grid-area: primary;
  grid-column: 1 / -1;
}
.command-center-insight-grid.command-center-insight-grid-priority.command-center-no-support .command-center-weather-panel{
  grid-area: weather;
  grid-column: 1 / -1;
}

@media (max-width: 1400px){
  .command-center-insight-grid.command-center-insight-grid-priority{
    grid-template-columns: 1fr;
    grid-template-areas:
      "primary"
      "support"
      "weather";
  }
  .command-center-insight-grid.command-center-insight-grid-priority .command-center-primary-panel,
  .command-center-insight-grid.command-center-insight-grid-priority .command-center-support-panel,
  .command-center-insight-grid.command-center-insight-grid-priority .command-center-weather-panel{
    grid-area:auto;
    grid-column:auto;
    grid-row:auto;
    order:initial;
  }
}



/* Command Center premium polish */
.command-center-weather-panel{
  min-height: 188px;
}
.command-center-weather-panel .command-center-weather-main{
  min-height: 54px;
}
.command-center-weather-panel .command-center-weather-stats{
  margin-top: 16px;
}
.command-center-support-panel .command-center-alert-list{
  margin-top: 10px;
}
.command-center-support-panel .command-center-alert.urgent,
.command-center-support-panel .command-center-due-soon.urgent{
  border-color: rgba(239,68,68,.28);
  box-shadow: 0 0 0 1px rgba(239,68,68,.10) inset, 0 6px 16px rgba(239,68,68,.08);
  background: linear-gradient(180deg, rgba(239,68,68,.08), rgba(239,68,68,.03));
}
.command-center-support-panel .command-center-alert.urgent strong,
.command-center-support-panel .command-center-alert.urgent{
  font-weight: 700;
}
.command-center-support-panel .command-center-health.urgent,
.command-center-support-panel .command-center-health.warn{
  box-shadow: 0 0 0 1px rgba(245,158,11,.10) inset;
}
@media (max-width: 1400px){
  .command-center-weather-panel{
    min-height: 0;
  }
}


/* Command Center v2 */
.command-center-priority-panel{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.command-center-priority-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.command-center-priority-top{
  border:1px solid var(--line, rgba(255,255,255,.12));
  border-radius:18px;
  padding:14px 16px;
  background:rgba(255,255,255,.03);
}
.command-center-priority-top.urgent,
.command-center-priority-alert.urgent,
.command-center-countdown-chip.urgent{
  box-shadow:0 0 0 1px rgba(255,120,120,.18), 0 0 24px rgba(255,120,120,.12);
  animation:commandCenterPulse 1.8s ease-in-out infinite;
}
.command-center-priority-top.warning,
.command-center-priority-alert.warning{
  box-shadow:0 0 0 1px rgba(255,200,120,.16);
}
.command-center-priority-port{
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:.01em;
}
.command-center-priority-alert{
  margin-top:6px;
  font-size:.95rem;
  color:var(--muted);
}
.command-center-countdown-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.command-center-countdown-chip{
  min-width:140px;
  border-radius:999px;
  padding:10px 14px;
  border:1px solid var(--line, rgba(255,255,255,.12));
  background:rgba(255,255,255,.035);
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.command-center-countdown-chip span{ font-size:.8rem; opacity:.8; }
.command-center-countdown-chip strong{ font-size:.95rem; }
.command-center-priority-middle{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.command-center-priority-row{
  border:1px solid var(--line, rgba(255,255,255,.12));
  border-radius:16px;
  padding:12px 14px;
  background:rgba(255,255,255,.025);
}
.command-center-priority-kicker{
  display:block;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
  opacity:.72;
  margin-bottom:4px;
}
.command-center-priority-main{
  font-size:1rem;
  font-weight:700;
}
.command-center-inline-countdown{
  display:inline-block;
  margin-left:8px;
  font-size:.82rem;
  font-weight:700;
  opacity:.85;
}
.command-center-priority-bottom{
  border-top:1px solid var(--line, rgba(255,255,255,.08));
  padding-top:10px;
}
.command-center-section-title{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
  opacity:.7;
  margin-bottom:8px;
}
.command-center-live-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.command-center-live-list-item{
  font-size:.96rem;
}
.command-center-tomorrow-preview{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--line, rgba(255,255,255,.08));
  display:flex;
  flex-direction:column;
  gap:4px;
}
.command-center-tomorrow-preview span{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
  opacity:.7;
}
.command-center-port-intelligence{
  border:1px solid var(--line, rgba(255,255,255,.10));
  border-radius:18px;
  padding:14px 16px;
  background:rgba(255,255,255,.03);
}
.command-center-port-visits{
  font-size:.78rem;
  font-weight:700;
  opacity:.78;
}
.command-center-port-title{
  font-size:1rem;
  font-weight:800;
  margin-top:4px;
}
.command-center-port-insight{
  margin-top:6px;
  color:var(--muted);
}
.command-center-port-list{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.command-center-port-list-item{
  font-size:.92rem;
}
.command-center-support-panel .command-center-alert.normal,
.command-center-support-panel .command-center-alert.info{
  opacity:.82;
}
@keyframes commandCenterPulse{
  0%, 100%{ transform:translateZ(0); }
  50%{ transform:translateY(-1px); }
}
body.light .command-center-priority-top,
body.light .command-center-priority-row,
body.light .command-center-countdown-chip,
body.light .command-center-port-intelligence{
  background:rgba(110,118,140,.04);
}


/* Command Center live polish */
.command-center-live-list-item.is-next{
  position:relative;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(99,102,241,.18);
  background:linear-gradient(180deg, rgba(99,102,241,.12), rgba(99,102,241,.04));
  box-shadow:0 0 0 1px rgba(99,102,241,.08) inset, 0 10px 24px rgba(99,102,241,.10);
}
.command-center-next-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:8px;
  padding:3px 8px;
  border-radius:999px;
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:rgba(99,102,241,.16);
  color:var(--text, inherit);
  vertical-align:middle;
}
.command-center-empty.smart{
  border:1px dashed var(--line, rgba(255,255,255,.14));
  border-radius:16px;
  padding:14px 16px;
  background:rgba(255,255,255,.025);
}
.command-center-weather-insight{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line, rgba(255,255,255,.08));
  font-size:.92rem;
  color:var(--muted);
}
body.light .command-center-live-list-item.is-next{
  background:linear-gradient(180deg, rgba(99,102,241,.08), rgba(99,102,241,.03));
}


/* Command Center: Today agenda time polish */
.command-center-today-agenda-list{
  gap:10px !important;
}
.command-center-today-agenda-item{
  line-height:1.35;
  transition:opacity .18s ease, transform .18s ease, background .18s ease;
}
.command-center-today-agenda-item.is-past{
  opacity:.52;
  font-weight:500;
}
.command-center-today-agenda-item.is-upcoming{
  font-weight:800;
}
.command-center-today-agenda-item.is-next{
  opacity:1;
}
.command-center-agenda-line{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:0;
}
.command-center-agenda-main{
  display:inline;
}
.command-center-today-time{
  font-weight:800;
  white-space:nowrap;
  opacity:.86;
}
.command-center-today-agenda-item.is-past .command-center-today-time{
  font-weight:700;
  opacity:.72;
}
.command-center-card-action-hint{
  margin-top:10px;
  font-size:.82rem;
  color:var(--muted);
}

/* Dashboard KPI compact paid-product layout patch */
#view-dashboard .dashboard-kpi-grid.compact-dashboard-kpis{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}
#view-dashboard .compact-dashboard-kpis .kpi{
  min-height:88px;
  padding:10px 12px;
  border-radius:13px;
}
#view-dashboard .compact-dashboard-kpis .kpi::before{
  height:3px;
}
#view-dashboard .compact-dashboard-kpis .kpi-label{
  font-size:.66rem;
  letter-spacing:.12em;
  min-height:13px;
  margin-bottom:4px;
}
#view-dashboard .compact-dashboard-kpis .kpi-value{
  font-size:1.55rem;
  min-height:30px;
  line-height:1;
}
#view-dashboard .compact-dashboard-kpis .kpi-sub{
  font-size:.74rem;
  line-height:1.15;
  min-height:14px;
  margin-top:3px;
}
#view-dashboard .compact-dashboard-kpis .kpi-points-next{
  min-height:104px;
}
#view-dashboard .compact-dashboard-kpis .lat-tracker{
  margin-top:5px;
}
#view-dashboard .compact-dashboard-kpis .lat-tracker-row{
  font-size:.66rem;
  margin-bottom:3px;
}
#view-dashboard .compact-dashboard-kpis .lat-track{
  height:7px;
}
@media (max-width: 720px){
  #view-dashboard .dashboard-kpi-grid.compact-dashboard-kpis{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:9px;
  }
  #view-dashboard .compact-dashboard-kpis .kpi{
    min-height:84px;
    padding:9px 10px;
  }
  #view-dashboard .compact-dashboard-kpis .kpi-label{font-size:.62rem;}
  #view-dashboard .compact-dashboard-kpis .kpi-value{font-size:1.35rem; min-height:26px;}
  #view-dashboard .compact-dashboard-kpis .kpi-sub{font-size:.7rem;}
}



/* === Dashboard Voyage Ready summary === */
.command-center-voyage-ready-head{
  align-items:center !important;
}
.command-center-voyage-ready-head h3{
  margin:0;
}
.command-center-voyage-ready-sub{
  margin-top:3px;
  color:var(--muted);
  font-size:.76rem;
  font-weight:700;
}
.command-center-voyage-ready-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.command-center-voyage-ready-viewall{
  min-height:32px;
  padding:6px 12px !important;
  border-radius:999px !important;
  font-size:.72rem !important;
  font-weight:900 !important;
}
.command-center-voyage-ready-summary{
  display:grid;
  gap:7px;
  margin-top:11px;
}
.command-center-voyage-ready-item{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 12px;
  border:1px solid rgba(56,189,248,.18);
  border-radius:13px;
  background:rgba(56,189,248,.045);
  color:var(--text);
  font-size:.82rem;
  line-height:1.35;
}
.command-center-voyage-ready-item.urgent{
  border-color:rgba(239,68,68,.20);
  background:rgba(239,68,68,.055);
}
.command-center-voyage-ready-dot{
  flex:0 0 auto;
}
.command-center-voyage-ready-more{
  padding:3px 4px 0;
  color:var(--muted);
  font-size:.72rem;
  font-weight:800;
}
.command-center-voyage-ready-clear{
  margin-top:10px;
  border:1px solid rgba(34,197,94,.16);
  border-radius:13px;
  background:rgba(34,197,94,.05);
}
@media(max-width:640px){
  .command-center-voyage-ready-head{
    align-items:flex-start !important;
    gap:10px !important;
  }
  .command-center-voyage-ready-actions{
    width:100%;
    justify-content:flex-end;
  }
}


/* === Voyage Ready guide / status-help modal: true scrollable body === */
.status-help-overlay{
  position:fixed !important;
  inset:0 !important;
  overflow:hidden !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}

.status-help-modal{
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  width:min(760px, calc(100vw - 32px)) !important;
  max-height:min(88dvh, 900px) !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.status-help-header{
  position:relative !important;
  z-index:5 !important;
  flex:0 0 auto !important;
}

.status-help-body{
  min-height:0 !important;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
  padding-bottom:28px !important;
  touch-action:pan-y !important;
}

/* Make sure tall guide content can actually move under the fixed header. */
#trip-status-help-overlay .status-help-modal{
  height:auto !important;
  max-height:min(88dvh, 900px) !important;
}

#trip-status-help-overlay .status-help-body{
  overflow-y:auto !important;
  min-height:0 !important;
}

/* Mobile: use nearly the full screen but keep body independently scrollable. */
@media (max-width:768px){
  .status-help-overlay{
    padding:0 !important;
    align-items:stretch !important;
    justify-content:stretch !important;
  }

  .status-help-modal{
    width:100% !important;
    max-width:none !important;
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
    grid-template-rows:auto minmax(0,1fr) !important;
  }

  .status-help-body{
    padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* === v128 mobile Command Center: keep Voyage Ready actions inside card === */
@media (max-width:640px){
  .command-center-voyage-ready-head{
    flex-direction:row !important;
    align-items:flex-start !important;
    gap:10px !important;
    min-width:0 !important;
  }
  .command-center-voyage-ready-head > div:first-child{
    flex:1 1 auto !important;
    min-width:0 !important;
  }
  .command-center-voyage-ready-actions{
    width:auto !important;
    max-width:48% !important;
    margin-left:auto !important;
    justify-content:flex-end !important;
    flex:0 0 auto !important;
  }
  .command-center-voyage-ready-viewall{
    white-space:nowrap !important;
  }
}

/* ===== Port memory collapsible cards v209 ===== */
.port-trip-memory-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer;
}
.port-trip-memory-toggle > span:first-child{min-width:0; display:block;}
.port-trip-memory-toggle .port-trip-memory-title,
.port-trip-memory-toggle .port-trip-memory-sub{display:block;}
.port-trip-memory-toggle-label{
  flex:0 0 auto; border:1px solid var(--surface-border); border-radius:999px;
  padding:8px 12px; font-weight:800; font-size:.78rem; white-space:nowrap;
  background:var(--surface, #fff);
}
.port-trip-memory-body[hidden]{display:none !important;}
.port-trip-memory.is-collapsed{padding-top:14px; padding-bottom:14px;}
.port-trip-memory.is-collapsed .port-trip-memory-sub{margin-top:3px;}
@media (max-width:767px){
  .port-trip-memory-toggle{align-items:flex-start;}
  .port-trip-memory-toggle-label{padding:7px 10px; font-size:.74rem;}
}